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: add a timeout on PressableWithFeedback for disable removal #18865

Merged
merged 7 commits into from
May 16, 2023
Merged

fix: add a timeout on PressableWithFeedback for disable removal #18865

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1cf0c12
fix: add a timeout on BaseGenericPressable for disabled cursor style
allroundexperts May 12, 2023
5846a52
fix: update the cleanup function for disabling cursor
allroundexperts May 13, 2023
2e04988
Merge branch 'main' into fix-18862
allroundexperts May 13, 2023
72adc46
fix: lint differences
allroundexperts May 13, 2023
534520b
fix: reset disable state on failure for OptiionRow
allroundexperts May 13, 2023
3d15814
Merge branch 'main' into fix-18862
allroundexperts May 14, 2023
527046e
fix: reset onpressHandler diff
allroundexperts May 14, 2023
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
2 changes: 1 addition & 1 deletion src/components/OptionRow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ class OptionRow extends Component {
result = Promise.resolve();
}
InteractionManager.runAfterInteractions(() => {
result.then(() => this.setState({isDisabled: this.props.isDisabled}));
result.finally(() => this.setState({isDisabled: this.props.isDisabled}));
});
}}
disabled={this.state.isDisabled}
Expand Down
14 changes: 12 additions & 2 deletions src/components/Pressable/GenericPressable/BaseGenericPressable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {useCallback, useEffect, useMemo, forwardRef} from 'react';
import React, {useCallback, useEffect, useState, useMemo, forwardRef} from 'react';
import {Pressable} from 'react-native';
import _ from 'underscore';
import Accessibility from '../../../libs/Accessibility';
Expand Down Expand Up @@ -63,6 +63,8 @@ const GenericPressable = forwardRef((props, ref) => {
return props.disabled || shouldBeDisabledByScreenReader;
}, [isScreenReaderActive, enableInScreenReaderStates, props.disabled]);

const [shouldUseDisabledCursor, setShouldUseDisabledCursor] = useState(isDisabled);

const onLongPressHandler = useCallback((event) => {
if (isDisabled) {
return;
Expand Down Expand Up @@ -103,6 +105,14 @@ const GenericPressable = forwardRef((props, ref) => {
onPressHandler(event);
}, [onPressHandler]);

useEffect(() => {
if (isDisabled) {
const timer = setTimeout(() => setShouldUseDisabledCursor(true), 1000);
return () => clearTimeout(timer);
}
setShouldUseDisabledCursor(false);
}, [isDisabled]);

useEffect(() => {
if (!keyboardShortcut) {
return () => {};
Expand All @@ -122,7 +132,7 @@ const GenericPressable = forwardRef((props, ref) => {
onPressIn={!isDisabled ? onPressIn : undefined}
onPressOut={!isDisabled ? onPressOut : undefined}
style={(state) => [
getCursorStyle(isDisabled, [props.accessibilityRole, props.role].includes('text')),
getCursorStyle(shouldUseDisabledCursor, [props.accessibilityRole, props.role].includes('text')),
StyleUtils.parseStyleFromFunction(props.style, state),
isScreenReaderActive && StyleUtils.parseStyleFromFunction(props.screenReaderActiveStyle, state),
state.focused && StyleUtils.parseStyleFromFunction(props.focusStyle, state),
Expand Down
7 changes: 4 additions & 3 deletions src/components/Pressable/PressableWithFeedback.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,10 @@ const PressableWithFeedback = forwardRef((props, ref) => {
setDisabled(props.disabled);
return;
}
onPress.then(() => {
setDisabled(props.disabled);
});
onPress
.finally(() => {
setDisabled(props.disabled);
});
Comment on lines +49 to +52
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's do the same for OptionRow as it may have same bug

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed.

});
}}
>
Expand Down