Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-30 20:33:54 -05:00
Code Issues Activity

fix(experience): shrink input field when autofilled by the browser (#6280)

Browse source
This commit is contained in:
Xiao Yijun 2024-07-19 16:45:01 +08:00 committed by GitHub
parent 156f5f5af4
commit 2101280940
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 31 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
packages/experience/src/components/InputFields/InputField/index.module.scss
View file

@ -44,6 +44,15 @@
transition: background-color 999999s ease-in-out 0s;
background-color: transparent;
}
&:-webkit-autofill {
/*
* Define a void transition css rule on the desired <input> element once it is :-webkit-autofilled.
* JavaScript will then be able to hook onto the 'animationstart' event.
* see https://stackoverflow.com/questions/11708092/detecting-browser-autofill/41530164#41530164
*/
animation-name: onAutoFillStart;
}
}
.suffix {
@ -115,3 +124,18 @@
}
}
}
/*
* Define a void transition css rule on the desired <input> element once it is :-webkit-autofilled.
* JavaScript will then be able to hook onto the 'animationstart' event.
* see https://stackoverflow.com/questions/11708092/detecting-browser-autofill/41530164#41530164
*/
@keyframes onAutoFillStart {
/* stylelint-disable-next-line block-no-empty */
from {}
/* stylelint-disable-next-line block-no-empty */
to {}
}

9
packages/experience/src/components/InputFields/InputField/index.tsx
View file

@ -65,10 +65,15 @@ const InputField = (
/**
* Fix the issue that the input field doesn't have the active style when the autofill value is set.
* Modern browsers will trigger an animation event when the input field is autofilled.
* We have define a void transition css rule on the input element once it is `:-webkit-autofill`ed.
* Hook onto this 'animationstart' event to detect the autofill start.
* see https://stackoverflow.com/questions/11708092/detecting-browser-autofill/41530164#41530164
*/
const handleAnimationStart = useCallback((event: AnimationEvent<HTMLInputElement>) => {
if (event.animationName === 'onautofillstart') {
/**
* Because SCSS adds some random characters to the ‘onAutoFillStart’ animation name during the build process, we can’t use the exact name here.
*/
if (event.animationName.includes('onAutoFillStart')) {
setHasValue(true);
}
}, []);