Bugfix/combobox disable autocomplete in firefox on android #3201
Conversation
… 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.
🦋 Changeset detectedLatest commit: a773710 The changes in this PR will be included in the next version bump. This PR includes changesets to release 7 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Storybook demod0c07fea2 | 90 komponenter | 141 stories |
| const [isFirefoxOnAndroid, setIsFirefoxOnAndroid] = useState(false); | ||
| useEffect(() => { | ||
| setIsFirefoxOnAndroid(/Android.+Firefox\//.test(navigator.userAgent)); | ||
| }, []); |
There was a problem hiding this comment.
Do we need to use useState and useEffect for this?
There was a problem hiding this comment.
That was the solution we agreed on to safely use navigator.userAgent, so it does not run on the server.
I suggested just nullchecking instead, but I don't know if that would work.
There was a problem hiding this comment.
Can test without in /examples/next-appdir if we want to make sure.
There was a problem hiding this comment.
Maybe something like this could work:
const isFirefoxOnAndroid = /Android.+Firefox\//.test(
typeof navigator === "undefined" ? "" : navigator.userAgent,
);
Description
Fixes #3200 temporarily.
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. As such, it seems like a browser issue, so we will just shut off the feature in this browser for now, and try to revisit this later.
Component Checklist 📝
@navikt/core/css/config/_mappings.js)@navikt/core/css/tokens.json)@navikt/aksel-stylelint/src/deprecations.ts)@navikt/core/react/src/index.tsand@navikt/core/react/package.json)@navikt/core/css/index.css)<Component>: <gitmoji?> <Text>.E.g. "Button: ✨ Add feature xyz.")