From 18b0cf5fa5f2ad0b6c305e789bc04706705549fa Mon Sep 17 00:00:00 2001 From: Vegard Haugstvedt Date: Tue, 8 Oct 2024 12:37:07 +0200 Subject: [PATCH] Bugfix/combobox disable autocomplete in firefox on android (#3201) * Disable autocomplete in Combobox to "fix" issue where autocomplete is broken in Firefox on Android The bug is that after three "correct" characters are entered in a row, the autocomplete inserts the third character incorrectly, messing up the text in the input. This also happens in other implementations of autocomple, like W3C's ARIA Authoring Practices Guide combobox with inline autocomple. * Add changeset * Use type checking instead of useEffect to prevent client code from running server side --- .changeset/rotten-moons-build.md | 5 +++++ .../core/react/src/form/combobox/ComboboxProvider.tsx | 10 +++++++++- 2 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 .changeset/rotten-moons-build.md diff --git a/.changeset/rotten-moons-build.md b/.changeset/rotten-moons-build.md new file mode 100644 index 0000000000..e063ca2eac --- /dev/null +++ b/.changeset/rotten-moons-build.md @@ -0,0 +1,5 @@ +--- +"@navikt/ds-react": patch +--- + +Combobox: Disable autocomple in Firefox on Android to prevent bug diff --git a/@navikt/core/react/src/form/combobox/ComboboxProvider.tsx b/@navikt/core/react/src/form/combobox/ComboboxProvider.tsx index 402445e43d..4845f5f254 100644 --- a/@navikt/core/react/src/form/combobox/ComboboxProvider.tsx +++ b/@navikt/core/react/src/form/combobox/ComboboxProvider.tsx @@ -51,13 +51,21 @@ const ComboboxProvider = forwardRef( value, onChange, onClear, - shouldAutocomplete, + shouldAutocomplete: externalShouldAutocomplete, size, ...rest } = props; const options = mapToComboboxOptionArray(externalOptions) || []; const filteredOptions = mapToComboboxOptionArray(externalFilteredOptions); const selectedOptions = mapToComboboxOptionArray(externalSelectedOptions); + + const userAgent = + typeof navigator === "undefined" ? "" : navigator.userAgent; + const isFirefoxOnAndroid = + userAgent.includes("Android") && userAgent.includes("Firefox/"); + const shouldAutocomplete = + !isFirefoxOnAndroid && externalShouldAutocomplete; + return (