autoDismiss prop in auto complete input type - #70
shahzaib3120 wants to merge 1 commit into
Conversation
WalkthroughThe recent updates focus on enhancing user interaction with autocomplete components. A notable addition is the Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Status
Actionable comments generated: 2
Configuration used: CodeRabbit UI
Files selected for processing (3)
- src/Components/AutoComplete.tsx (4 hunks)
- src/Inputs/InputAutocomplete.tsx (2 hunks)
- src/Types/Types.ts (2 hunks)
Additional comments: 8
src/Inputs/InputAutocomplete.tsx (1)
- 70-70: Passing the
dismissvariable to theAutoCompletecomponent asautoDismissis correctly implemented. However, ensure that theAutoCompletecomponent's prop types are updated to reflect this new property, and consider the previous suggestion to simplify the handling ofautoDismiss.src/Types/Types.ts (2)
- 62-62: The addition of the
autoDismissproperty toInputAutocompletePropswith an optional boolean type is correctly implemented. This change accurately reflects the new functionality introduced in theInputAutocompletecomponent.- 71-71: The
autoDismissproperty inAutoCompletePropsis correctly added as a non-optional boolean. This enforces the requirement for this property when theAutoCompletecomponent is used, aligning with the component's updated logic that relies on this property.src/Components/AutoComplete.tsx (5)
- 14-15: The destructuring of
autoDismissalong with other props is correctly implemented. This setup allows theAutoCompletecomponent to utilize theautoDismissproperty effectively within its logic.- 36-40: The removal of spaces in the
testIDtemplate literals is a minor change that improves consistency in the codebase. This change is correctly applied to theAppbar.Actioncomponent for the close icon.- 33-46: > 📝 NOTE
This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [43-49]
Similarly, the adjustment to the
testIDfor the check icon in theAppbar.Actioncomponent is correctly implemented, enhancing consistency in the use oftestIDattributes throughout the component.
- 55-62: The update to the
Searchbarcomponent'stestIDand placeholder text follows the same pattern of improving consistency and clarity in the code. The conditional rendering of the placeholder text based on the presence of aplaceholderprop or defaulting to a generic search label is a thoughtful touch.- 75-78: The implementation of the
autoDismisslogic within theList.ItemonPress event handler is correct. It ensures that ifautoDismissis true, selecting an item not only updates the field value but also dismisses the modal, aligning with the PR's objective to streamline user interactions.
| options, | ||
| CustomAutoComplete, | ||
| CustomTextInput, | ||
| autoDismiss, |
There was a problem hiding this comment.
The autoDismiss property is destructured from props but lacks documentation. Consider adding a comment explaining its purpose and behavior, especially since it influences the modal's dismissal logic.
+ // autoDismiss controls if the modal should close automatically upon selection
autoDismiss,Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| autoDismiss, | |
| // autoDismiss controls if the modal should close automatically upon selection | |
| autoDismiss, |
| const errorMessage = formState.errors?.[field.name]?.message; | ||
| const textColor = errorMessage ? theme.colors.error : theme.colors.text; | ||
| const [visible, setVisible] = useState(false); | ||
| const dismiss = autoDismiss ?? false; |
There was a problem hiding this comment.
The conditional assignment of autoDismiss to false if not provided is correct. However, this logic could be simplified by setting a default prop value for autoDismiss, which would make the component cleaner and more readable.
- const dismiss = autoDismiss ?? false;
+ // Moved to default props for cleaner codeAnd then add to the bottom of the file:
+ InputAutocomplete.defaultProps = {
+ autoDismiss: false,
+ };
1 participant
The user might want to close the modal after selecting a value in the AutoComplete input type to avoid having to click the action button in the top right corner.
I added an optional
autoDismissprop which if set to true automatically closes the modal. and omitting it or setting it to false shows the default behavior.Summary by CodeRabbit
autoDismissfeature for autocomplete components, allowing for automatic dismissal of suggestions upon selection.AutoCompleteandInputAutocompletecomponents to support the newautoDismissproperty.autoDismissproperty in autocomplete components.