How to remove outline in input component in iOS browsers?

[ruida-shen]

💬 Question

I use UI Kitten + expo web for my project, when I open my app in ios browsers, e.g. chrome, safari, the text input when focused has this blue outline, for example:

Chrome:

Safari:

How do I get rid of this blue outline?

UI Kitten and Eva version

Package	Version
@eva-design/eva	2.1.1
@ui-kitten/components	5.1.1

[noone-silent]

Also happens in Firefox

@eva-design/eva 2.1.1 @ui-kitten/components 5.1.2

[ruida-shen]

Also happens in Firefox

@eva-design/eva 2.1.1

@ui-kitten/components 5.1.2

Adding

input:focus { outline:none; }

to my global css style fixes the issue

[noone-silent]

Please reopen. This is still a bug. Just because you hacked your way through (global style in react-native?), doesn't mean it's fixed.

[ruida-shen]

Please reopen. This is still a bug. Just because you hacked your way through (global style in react-native?), doesn't mean it's fixed.

I don't think this is a bug, i think it is browser's default style applied to input element

[noone-silent]

Yes and this component should render it correctly and disable the outline

[ruida-shen]

Yes and this component should render it correctly and disable the outline

They may intentionally leave it like this for better accessibility, but I will reopen the issue and wait for the official response

[inform880]

I'm github surfing trying to find the best UI library for React Native Web, and came across this issue. The creator of React Native Web is leaving the blue outline on purpose for a11y benefits, as you suggested in your last comment @ruida-shen, https://github.com/necolas/react-native-web/issues/48#issuecomment-165980585, but he added some props to make it easy to override it a few years ago.

A more succinct solution is here, later on in the same issue, if you don't want a global style, https://github.com/necolas/react-native-web/issues/48#issuecomment-788966150. @ruida-shen I think you can close this issue, unless you need to add some props to ui-kitten

@noone-silent So this isn't a bug at all, it's completely intentional and really has nothing to do with ui-kitten, as I personally would always keep the default a11y unless overridden by the end developer.

I also wouldn't call the global style a hack, as you can always override it on the component level. It's quite literally using global styles exactly how they should be. I know of several production RNW apps using this same global fix without issue.

[ruida-shen]

I'm github surfing trying to find the best UI library for React Native Web, and came across this issue. The creator of React Native Web is leaving the blue outline on purpose for a11y benefits, as you suggested in your last comment @ruida-shen, https://github.com/necolas/react-native-web/issues/48#issuecomment-165980585, but he added some props to make it easy to override it a few years ago.

A more succinct solution is here, later on in the same issue, if you don't want a global style, https://github.com/necolas/react-native-web/issues/48#issuecomment-788966150.

@ruida-shen I think you can close this issue, unless you need to add some props to ui-kitten

@noone-silent So this isn't a bug at all, it's completely intentional and really has nothing to do with ui-kitten, as I personally would always keep the default a11y unless overridden by the end developer.

I also wouldn't call the global style a hack, as you can always override it on the component level. It's quite literally using global styles exactly how they should be. I know of several production RNW apps using this same global fix without issue.

Thanks for clarifying, I will close this.

[3days3ways]

This JUST started happening to my macbook pro (running ventura) after running a CleanMyMacX scan and "cleaning up" the system. I don't do anything even remotely related to coding, developing or anything similarly advanced; so its not a hack or coding issue as the above comments seem to suggest may be the cause (i could be wrong about the content of this thread but thats what it sounds like to me...?). Out of no where (aside from the scan) this started happening in addition to a few other symptoms of messed up software/system.

While on safari (havent tried chrome or anything else) i get the colored outline box around focus/input areas and it gets triggered occasionally after hitting spacebar but it comes and goes, it is not constant. safari also gets force refreshed after every click or tap. For example: while searching safari for solutions i would double tap/right click a URL and add to reading list (and if i open it), as soon as i continue to browse the other search results the page refreshes on its own after every single tap/click.... makes searching incredibly difficult and frustrating. Another thing ive noticed so far is the 'space bar' occasionally decides to just not work unless i use 'shift' at the same time as 'spacebar' (this took awhile to figure out...). I was able to catch a screen recording of most of this and im thnking ill reach out to apple support with that but previous times reaching out to appke supoort was always a complete waste of time so i dont have high expectations. Id really appreciate any help anyone can give me on how to solve this, or resources i can use to get to a solution. Im really not tech smart so the more entry level the solution, the better please. Edit: right after uploading this i noticed a new symptom! any new tab i open is automatically made active. of course i immediately checked to see whether that setting has somehow been triggered but its not even enabled... Thanks