fix navigate to detail page on enter for highlighted item #54807
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
@ikevin127 Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
Reviewer Checklist
Screenshots/VideosAndroid: Nativeandroid.mp4Android: mWeb Chromeandroid-mweb.mp4iOS: Nativeios.mp4iOS: mWeb Safariios-mweb.mp4MacOS: Chrome / Safariweb.movMacOS: Desktopdesktop.mov |
ikevin127
suggested changes
Jan 7, 2025
| @@ -123,6 +124,24 @@ function SearchRouterInput( | |||
| }} | |||
| isLoading={!!isSearchingForReports} | |||
| ref={ref} | |||
| onKeyPress={(event) => { | |||
There was a problem hiding this comment.
❌ We shouldn't introduce platform specific code in our codebase, but instead use platform-specific file extensions. Below are the details of what I mean by platform-specific logic + diff which can be applied directly to this PR:
Details + DIFF (Open)
Create SearchInputOnKeyPress folder in src/libs with the following platform-specific logic:
index.ts (applies to web / mweb / desktop)
import type {NativeSyntheticEvent, TextInputKeyPressEventData} from 'react-native';
import CONST from '@src/CONST';
function handleKeyPress(onSubmit: () => void) {
return (event: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
const isEnterKey = event.nativeEvent.key.toLowerCase() === CONST.PLATFORM_SPECIFIC_KEYS.ENTER.DEFAULT;
if (!isEnterKey) {
return;
}
onSubmit();
};
}
export default handleKeyPress;index.native.ts (noop)
import type {NativeSyntheticEvent, TextInputKeyPressEventData} from 'react-native';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const handleKeyPress = (onSubmit: () => void) => (event: NativeSyntheticEvent<TextInputKeyPressEventData>) => {};
export default handleKeyPress;then apply diff using the new lib.
diff --git a/src/components/Search/SearchRouter/SearchRouterInput.tsx b/src/components/Search/SearchRouter/SearchRouterInput.tsx
index 7ad7c43acc5..3eae84d1e40 100644
--- a/src/components/Search/SearchRouter/SearchRouterInput.tsx
+++ b/src/components/Search/SearchRouter/SearchRouterInput.tsx
@@ -9,7 +9,7 @@ import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import useThemeStyles from '@hooks/useThemeStyles';
-import getPlatform from '@libs/getPlatform';
+import handleKeyPress from '@libs/SearchInputOnKeyPress';
import shouldDelayFocus from '@libs/shouldDelayFocus';
import variables from '@styles/variables';
import CONST from '@src/CONST';
@@ -124,24 +124,7 @@ function SearchRouterInput(
}}
isLoading={!!isSearchingForReports}
ref={ref}
- onKeyPress={(event) => {
- const isWebPlatform = getPlatform() === CONST.PLATFORM.WEB;
-
- // Exit early if not on the web platform
- if (!isWebPlatform) {
- return;
- }
-
- const isEnterKey = event.nativeEvent.key.toLowerCase() === CONST.PLATFORM_SPECIFIC_KEYS.ENTER.DEFAULT;
-
- // Exit if the pressed key is not Enter
- if (!isEnterKey) {
- return;
- }
-
- // Perform the submit action
- onSubmit();
- }}
+ onKeyPress={handleKeyPress(onSubmit)}
/>
</View>
{!!rightComponent && <View style={styles.pr3}>{rightComponent}</View>}🟢 Once the changes are applied, I'll check again and approve if all pass!
There was a problem hiding this comment.
@ikevin127 Thank you very much for your detailed suggestions and guidance. 👍 I have made the updates. Could you kindly review it again?
ikevin127
approved these changes
Jan 7, 2025
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
60 tasks
|
🚀 Deployed to staging by https://github.com/luacmartins in version: 9.0.82-0 🚀
|
1 similar comment
|
🚀 Deployed to staging by https://github.com/luacmartins in version: 9.0.82-0 🚀
|
8 tasks
|
Failing with original bug id #53401 in android https://platform.applause.com/services/links/v1/external/927a881e29616d6bec5adc25bf081179bb4fa950ca6044118e6d76f70fd5e90d |
|
@kavimuru #54807 (comment) looks like expected behaviour to me given the fix we just applied in this PR. cc @luacmartins @huult to confirm whether or not there's a problem |
|
Yea, that's the expected behavior |
|
🚀 Deployed to production by https://github.com/thienlnam in version: 9.0.82-12 🚀
|
8 tasks
|
BUG: see video: |
48 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Details
Fixed Issues
$ #53401
PROPOSAL: #53401 (comment)
Tests
Same QA step
Offline tests
QA Steps
For the Native App
For the Mobile Web App (MWeb)
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)myBool && <MyComponent />.src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Screen.Recording.2025-01-06.at.14.00.07.mov
Android: mWeb Chrome
Screen.Recording.2025-01-06.at.14.00.37.mov
iOS: Native
Screen.Recording.2025-01-06.at.14.10.30.mov
iOS: mWeb Safari
Screen.Recording.2025-01-06.at.14.11.14.mov
MacOS: Chrome / Safari
Screen.Recording.2025-01-06.at.14.12.32.mov
MacOS: Desktop
Screen.Recording.2025-01-06.at.14.14.03.mov