search

LottieFiles / lottie-react

lottie web player as a react component
https://lottiefiles.com
MIT License
721 stars 80 forks source link

Inputs (eg. text, checkbox) lose their browser default focus styling #38

Closed Lodesa closed 3 years ago

Lodesa commented 3 years ago

If I import the player onto a page with inputs, the default blue outline that Chrome adds when focusing on an input element no longer appears.

import { Player } from "@lottiefiles/react-lottie-player";
export default () => <input type='text'/>

In the above example their will be no outline on focus. If you comment out the import the focus outline will return.

It appears to be caused by this CSS with a very generic selector: https://github.com/LottieFiles/lottie-react/blob/master/src/Styles.css#L74

karamalie commented 3 years ago

Noted. Will update the css for next version bump

Lodesa commented 3 years ago

Noted. Will update the css for next version bump

Thank you so much.

karamalie commented 3 years ago

Issue should be fixed now. focus outline will only be set within the Lottie container