Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fix] Prevent fade on scroll #8386

Merged
merged 6 commits into from
Apr 14, 2022
Merged

[Fix] Prevent fade on scroll #8386

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
32768de
fix: prevent fade on scroll
mdneyazahmad Mar 31, 2022
653dfcb
refactor: rename component name
mdneyazahmad Apr 11, 2022
bd51e48
docs: update comments
mdneyazahmad Apr 11, 2022
a8ce45a
resolve merge conflict
mdneyazahmad Apr 11, 2022
258fd3c
refactor: change variable name
mdneyazahmad Apr 13, 2022
d01b810
style: move comments above class
mdneyazahmad Apr 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
import CONST from '../../../CONST';

const ImageRenderer = (props) => {
Expand Down Expand Up @@ -51,7 +51,7 @@ const ImageRenderer = (props) => {
originalFileName={originalFileName}
>
{({show}) => (
<TouchableWithoutFocus
<PressableWithoutFocus
style={styles.noOutline}
onPress={show}
>
Expand All @@ -60,7 +60,7 @@ const ImageRenderer = (props) => {
style={styles.webViewStyles.tagStyles.img}
isAuthTokenRequired={isAttachment}
/>
</TouchableWithoutFocus>
</PressableWithoutFocus>
)}
</AttachmentModal>
);
Expand Down
22 changes: 13 additions & 9 deletions src/components/TouchableWithoutFocus.js → src/components/PressableWithoutFocus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -21,29 +21,33 @@ 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 TouchableWithoutFocus extends React.Component {
class PressableWithoutFocus extends React.Component {
constructor(props) {
super(props);
this.pressAndBlur = this.pressAndBlur.bind(this);
}

pressAndBlur() {
this.touchableRef.blur();
this.pressableRef.blur();
this.props.onPress();
}

render() {
return (
<TouchableOpacity onPress={this.pressAndBlur} ref={el => this.touchableRef = el} style={this.props.styles}>
<Pressable onPress={this.pressAndBlur} ref={el => this.pressableRef = el} style={this.props.styles}>
{this.props.children}
</TouchableOpacity>
</Pressable>
);
}
}

TouchableWithoutFocus.propTypes = propTypes;
TouchableWithoutFocus.defaultProps = defaultProps;
PressableWithoutFocus.propTypes = propTypes;
PressableWithoutFocus.defaultProps = defaultProps;

export default TouchableWithoutFocus;
export default PressableWithoutFocus;