From 32768dec642efb84f4cc51c021c0469a33158bfb Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Thu, 31 Mar 2022 12:04:36 +0530 Subject: [PATCH 1/5] fix: prevent fade on scroll --- src/components/TouchableWithoutFocus.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/TouchableWithoutFocus.js b/src/components/TouchableWithoutFocus.js index dddeb4c2cd33..b82ed25bed1c 100644 --- a/src/components/TouchableWithoutFocus.js +++ b/src/components/TouchableWithoutFocus.js @@ -1,5 +1,5 @@ import React from 'react'; -import {TouchableOpacity} from 'react-native'; +import {Pressable} from 'react-native'; import PropTypes from 'prop-types'; const propTypes = { @@ -36,9 +36,9 @@ class TouchableWithoutFocus extends React.Component { render() { return ( - this.touchableRef = el} style={this.props.styles}> + this.touchableRef = el} style={this.props.styles}> {this.props.children} - + ); } } From 653dfcbd1115fd9f54ef2b4085393a7c1c7783de Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Mon, 11 Apr 2022 16:41:50 +0530 Subject: [PATCH 2/5] refactor: rename component name --- .../HTMLEngineProvider/HTMLRenderers/ImageRenderer.js | 6 +++--- ...{TouchableWithoutFocus.js => PressableWithoutFocus.js} | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) rename src/components/{TouchableWithoutFocus.js => PressableWithoutFocus.js} (84%) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js index e1f9b356ab97..439c5e48bc85 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js @@ -4,7 +4,7 @@ import Config from '../../../CONFIG'; import AttachmentModal from '../../AttachmentModal'; import styles from '../../../styles/styles'; import ThumbnailImage from '../../ThumbnailImage'; -import TouchableWithoutFocus from '../../TouchableWithoutFocus'; +import PressableWithoutFocus from '../../PressableWithoutFocus'; const ImageRenderer = (props) => { const htmlAttribs = props.tnode.attributes; @@ -50,7 +50,7 @@ const ImageRenderer = (props) => { originalFileName={originalFileName} > {({show}) => ( - @@ -59,7 +59,7 @@ const ImageRenderer = (props) => { style={styles.webViewStyles.tagStyles.img} isAuthTokenRequired={isAttachment} /> - + )} ); diff --git a/src/components/TouchableWithoutFocus.js b/src/components/PressableWithoutFocus.js similarity index 84% rename from src/components/TouchableWithoutFocus.js rename to src/components/PressableWithoutFocus.js index b82ed25bed1c..2b9402a609c2 100644 --- a/src/components/TouchableWithoutFocus.js +++ b/src/components/PressableWithoutFocus.js @@ -23,7 +23,7 @@ const defaultProps = { /** * This component prevents the tapped element from capturing focus */ -class TouchableWithoutFocus extends React.Component { +class PressableWithoutFocus extends React.Component { constructor(props) { super(props); this.pressAndBlur = this.pressAndBlur.bind(this); @@ -43,7 +43,7 @@ class TouchableWithoutFocus extends React.Component { } } -TouchableWithoutFocus.propTypes = propTypes; -TouchableWithoutFocus.defaultProps = defaultProps; +PressableWithoutFocus.propTypes = propTypes; +PressableWithoutFocus.defaultProps = defaultProps; -export default TouchableWithoutFocus; +export default PressableWithoutFocus; From bd51e48bba523277b95c7a623d8c9b90a146ec32 Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Mon, 11 Apr 2022 16:54:27 +0530 Subject: [PATCH 3/5] docs: update comments --- src/components/PressableWithoutFocus.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/PressableWithoutFocus.js b/src/components/PressableWithoutFocus.js index 2b9402a609c2..dacbda5fec8d 100644 --- a/src/components/PressableWithoutFocus.js +++ b/src/components/PressableWithoutFocus.js @@ -30,6 +30,11 @@ class PressableWithoutFocus extends React.Component { } pressAndBlur() { + // We need to blur this element when clicked as it opens modal that implements focus-trapping. + // When the modal is closed it focuses back to the last active element. + // Therefore it shifts the element to bring it back to focus. + // https://github.com/Expensify/App/issues/6806 + this.touchableRef.blur(); this.props.onPress(); } From 258fd3cab9eedfa221c158c9856253eee0111f38 Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Wed, 13 Apr 2022 16:04:47 +0530 Subject: [PATCH 4/5] refactor: change variable name --- src/components/PressableWithoutFocus.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/PressableWithoutFocus.js b/src/components/PressableWithoutFocus.js index dacbda5fec8d..5f42cf6b7d18 100644 --- a/src/components/PressableWithoutFocus.js +++ b/src/components/PressableWithoutFocus.js @@ -35,13 +35,13 @@ class PressableWithoutFocus extends React.Component { // Therefore it shifts the element to bring it back to focus. // https://github.com/Expensify/App/issues/6806 - this.touchableRef.blur(); + this.pressableRef.blur(); this.props.onPress(); } render() { return ( - this.touchableRef = el} style={this.props.styles}> + this.pressableRef = el} style={this.props.styles}> {this.props.children} ); From d01b8102c90015148e9a0e22930caf4512d84f8c Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Wed, 13 Apr 2022 16:15:35 +0530 Subject: [PATCH 5/5] style: move comments above class --- src/components/PressableWithoutFocus.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/PressableWithoutFocus.js b/src/components/PressableWithoutFocus.js index 5f42cf6b7d18..35a9cce995ed 100644 --- a/src/components/PressableWithoutFocus.js +++ b/src/components/PressableWithoutFocus.js @@ -21,7 +21,11 @@ const defaultProps = { }; /** - * This component prevents the tapped element from capturing focus + * This component prevents the tapped element from capturing focus. + * We need to blur this element when clicked as it opens modal that implements focus-trapping. + * When the modal is closed it focuses back to the last active element. + * Therefore it shifts the element to bring it back to focus. + * https://github.com/Expensify/App/issues/6806 */ class PressableWithoutFocus extends React.Component { constructor(props) { @@ -30,11 +34,6 @@ class PressableWithoutFocus extends React.Component { } pressAndBlur() { - // We need to blur this element when clicked as it opens modal that implements focus-trapping. - // When the modal is closed it focuses back to the last active element. - // Therefore it shifts the element to bring it back to focus. - // https://github.com/Expensify/App/issues/6806 - this.pressableRef.blur(); this.props.onPress(); }