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 1 commit
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
99 changes: 62 additions & 37 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,45 +63,70 @@ const GenericPressable = forwardRef((props, ref) => {
return props.disabled || shouldBeDisabledByScreenReader;
}, [isScreenReaderActive, enableInScreenReaderStates, props.disabled]);

const onLongPressHandler = useCallback((event) => {
if (isDisabled) {
return;
}
if (!onLongPress) {
return;
}
if (shouldUseHapticsOnLongPress) {
HapticFeedback.longPress();
}
if (ref && ref.current) {
ref.current.blur();
}
onLongPress(event);

Accessibility.moveAccessibilityFocus(nextFocusRef);
}, [shouldUseHapticsOnLongPress, onLongPress, nextFocusRef, ref, isDisabled]);
const [shouldUseDisabledCursor, setShouldUseDisabledCursor] = useState(isDisabled);

const onLongPressHandler = useCallback(
(event) => {
if (isDisabled) {
return;
}
if (!onLongPress) {
return;
}
if (shouldUseHapticsOnLongPress) {
HapticFeedback.longPress();
}
if (ref && ref.current) {
ref.current.blur();
}
onLongPress(event);

Accessibility.moveAccessibilityFocus(nextFocusRef);
},
[shouldUseHapticsOnLongPress, onLongPress, nextFocusRef, ref, isDisabled],
);

const onPressHandler = useCallback((event) => {
if (isDisabled) {
return;
}
if (shouldUseHapticsOnPress) {
HapticFeedback.press();
}
if (ref && ref.current) {
ref.current.blur();
}
onPress(event);
const onPressHandler = useCallback(
(event) => {
if (isDisabled) {
return;
}
if (shouldUseHapticsOnPress) {
HapticFeedback.press();
}
if (ref && ref.current) {
ref.current.blur();
}
onPress(event);

Accessibility.moveAccessibilityFocus(nextFocusRef);
},
[shouldUseHapticsOnPress, onPress, nextFocusRef, ref, isDisabled],
);

Accessibility.moveAccessibilityFocus(nextFocusRef);
}, [shouldUseHapticsOnPress, onPress, nextFocusRef, ref, isDisabled]);
const onKeyPressHandler = useCallback(
(event) => {
if (event.key !== 'Enter') {
return;
}
onPressHandler(event);
},
[onPressHandler],
);

const onKeyPressHandler = useCallback((event) => {
if (event.key !== 'Enter') {
return;
useEffect(() => {
let timer = null;
if (!isDisabled) {
setShouldUseDisabledCursor(false);
} else {
timer = setTimeout(() => setShouldUseDisabledCursor(true), 1000);
}
onPressHandler(event);
}, [onPressHandler]);

return () => {
if (!timer) return;
clearTimeout(timer);
};
}, [isDisabled]);
Copy link
Contributor

Choose a reason for hiding this comment

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

Make the cleanup function only if isDisabled is true.

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

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.


useEffect(() => {
if (!keyboardShortcut) {
Expand All @@ -122,7 +147,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
8 changes: 5 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,11 @@ const PressableWithFeedback = forwardRef((props, ref) => {
setDisabled(props.disabled);
return;
}
onPress.then(() => {
setDisabled(props.disabled);
});
onPress
.then(() => {
setDisabled(props.disabled);
})
.catch(() => setDisabled(props.disabled));
Copy link
Contributor

Choose a reason for hiding this comment

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

Why this is required?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

During my testing, I found that the button would be stuck in a disabled state if the promise failed. This resets the button so that the user can continue.

Copy link
Contributor

Choose a reason for hiding this comment

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

Can you pinpoint to any real case that I can reproduce?
Also if that's the case we should just use finally instead of then & catch.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It really depends on the onPress function being supplied. And yea, finally looks good.

});
}}
>
Expand Down