Fix: [Clear Button is active when no input is selected in Dropdown] #9264
Conversation
WalkthroughThe changes in the Changes
Assessment against linked issues
Suggested labels
Poem
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 using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
src/components/Form/AutoCompleteAsync.tsx (2)
95-99: Consider resetting hasTyped when input is clearedThe input handling looks good, but consider resetting
hasTypedto false when the input becomes empty through backspace/delete to maintain consistency with the component's behavior.const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => { const newQuery = event.target.value; setQuery(newQuery); - setHasTyped(newQuery.length > 0); // Set hasTyped to true if input is not empty + setHasTyped(newQuery.length > 0); // Update hasTyped based on input presence
107-108: Consider simplifying the visibility conditionWhile the logic is correct, the condition could be more readable by grouping related checks.
- const shouldShowClearButton = (hasSelection || hasTyped) && query !== ""; // Exclude placeholder when query is empty + const shouldShowClearButton = query !== "" && (hasSelection || hasTyped); // Show only when there's input and user interaction
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
src/components/Form/AutoCompleteAsync.tsx(4 hunks)
🔇 Additional comments (4)
src/components/Form/AutoCompleteAsync.tsx (4)
67-67: LGTM: Clean state management addition
The new state variable hasTyped is well-named and appropriately initialized to track user interaction with the input field.
101-105: LGTM: Comprehensive selection handling
The selection handler properly manages all relevant states, ensuring the input field reflects the selected option while maintaining the typed state.
147-157: LGTM: Comprehensive clear button implementation
The clear button implementation properly resets all relevant states and maintains good UX with tooltips and accessibility features.
Line range hint 1-236: Verify similar patterns in other form components
Let's ensure consistency across other form components that might have similar clear button functionality.
✅ Verification successful
Clear button implementation is consistent with existing patterns
The implementation in AutoCompleteAsync.tsx follows the same clear button pattern found in other form components:
TextFormField.tsxusesCareIconwithl-times-circlefor clearing inputModelCrudEditor.tsxuses similar icon pattern for removal actions- The new implementation maintains consistency with these existing patterns, including:
- Using the same icon (
l-times-circle) - Proper positioning (absolute positioning on the right)
- Similar interaction patterns (click to clear)
- Consistent styling approach
- Using the same icon (
The changes align well with the existing codebase patterns and maintain UI/UX consistency across form components.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for similar clear button patterns in other form components
echo "Searching for similar clear button implementations..."
rg -l "CareIcon.*times-circle" "src/components/Form"
# Search for other autocomplete implementations
echo "Checking for other autocomplete implementations..."
rg -l "Combobox.*clear.*selection" "src/components"
Length of output: 421
Script:
#!/bin/bash
# Let's examine the clear button implementations in the identified files
echo "Checking ModelCrudEditor.tsx implementation:"
rg -A 5 -B 5 "times-circle" "src/components/Form/ModelCrudEditor.tsx"
echo "\nChecking TextFormField.tsx implementation:"
rg -A 5 -B 5 "times-circle" "src/components/Form/FormFields/TextFormField.tsx"
# Let's also check for other Combobox components that might have similar patterns
echo "\nChecking for other Combobox components:"
ast-grep --pattern 'const $_ = ($_: Props) => {
$$$
Combobox
$$$
}'
Length of output: 1218
|
@Jacobjeevan I had not touched the other codes but its giving errors in Cypress Tests that are being shown in different components. And the clear button is working smoothly after making the code changes |
| @@ -128,14 +144,16 @@ const AutoCompleteAsync = (props: Props) => { | |||
| {!disabled && ( | |||
| <ComboboxButton className="absolute inset-y-0 right-0 flex items-center pr-2"> | |||
| <div className="absolute right-0 mr-2 flex items-center text-lg text-secondary-900"> | |||
| {hasSelection && !loading && !required && ( | |||
| {shouldShowClearButton && !loading && !required && ( | |||
There was a problem hiding this comment.
Let's not change AutoCompleteAsync.
You will notice that issue doesn't persist across all FacilitySelect instances, but rather in ManagePatients and AssetsList; hasSelection normally takes care of this, so look into those two instances and fix those.
Jacobjeevan
added
changes required
and removed
question
Proposed Changes
Behaviour after the changes
Screen Records
Screencast.from.2024-12-02.00-14-08.webm
Summary by CodeRabbit
New Features
Bug Fixes