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

Jump to bottom

Fix: [Clear Button is active when no input is selected in Dropdown] #9264

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
+21 −3
Open

Fix: [Clear Button is active when no input is selected in Dropdown] #9264

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
24 changes: 21 additions & 3 deletions src/components/Form/AutoCompleteAsync.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ const AutoCompleteAsync = (props: Props) => {
const [data, setData] = useState([]);
const [query, setQuery] = useState("");
const [loading, setLoading] = useState(false);
const [hasTyped, setHasTyped] = useState(false); // Track if the user has typed
const { t } = useTranslation();

const hasSelection =
Expand Down Expand Up @@ -91,12 +92,27 @@ const AutoCompleteAsync = (props: Props) => {
fetchDataAsync(query);
}, [query, fetchDataAsync]);

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
};

const handleSelectionChange = (selectedOption: any) => {
onChange(selectedOption);
setQuery(optionLabel(selectedOption)); // Set the query to the selected option's label
setHasTyped(true); // After selecting, set hasTyped to true
};

// Function to determine if the clear button should be shown
const shouldShowClearButton = (hasSelection || hasTyped) && query !== ""; // Exclude placeholder when query is empty

return (
<div className={className}>
<Combobox
value={selected}
disabled={disabled}
onChange={onChange}
onChange={handleSelectionChange}
by={compareBy}
multiple={multiple as any}
immediate
Expand All @@ -118,7 +134,7 @@ const AutoCompleteAsync = (props: Props) => {
displayValue={() =>
hasSelection && !multiple ? optionLabel?.(selected) : ""
}
onChange={({ target }) => setQuery(target.value)}
onChange={handleInputChange}
onFocus={props.onFocus}
onBlur={() => {
props.onBlur?.();
Expand All @@ -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 && (
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 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.

<div className="tooltip" id="clear-button">
<CareIcon
icon="l-times-circle"
className="h-4 w-4 text-secondary-800 transition-colors duration-200 ease-in-out hover:text-secondary-500"
onClick={(e) => {
e.preventDefault();
onChange(null);
setQuery(""); // Clear the query when clearing the selection
setHasTyped(false); // Reset the typing flag
}}
/>
<span className="tooltip-text tooltip-bottom -translate-x-1/2 text-xs">
Expand Down
Loading