React-native-paper: Removing web outline in textinput

[adrianicv]

Environment

react-native-paper: 3.0.0

Ask your Question

When using textinput with react-native-web it appears an additional line surrounding the input (I have tested it in chrome). In the flat mode, it is ok, but in the outlined, this line crosses out the label when focusing on the input as shown in the image:

Researching a little bit, I have found a solution that consists in adding to the input style outline: 'none'. In order not to affect the visualization in Android and IOs this line should be placed inside a Platform selection like:

Platform.select({
    web: {
        input: {
          outline: 'none',
    },
}

I have been trying to inject this style into the input but I have not found a way to do it. How can I do it?

Inserting this style line directly in the browser's element inspector solves the problem:

[venits]

The easiest way:

In you web project add something like this to your index.css or somewhere where you handle CSS.

input {
  outline: none !important;
}

It will remove outline from all inputs on web :)

[actuallymentor]

In you web project add something like this to your index.css or somewhere where you handle CSS.

This is a react native package. Presumably there should be a style={ } option to achieve this?

[nirbhayph]

I don't see a separate web project as such in the boiler plate code by expo. Where should I add this @venits

[jaelarmasm]

The easiest way:

In you web project add something like this to your index.css or somewhere where you handle CSS.

input {
  outline: none !important;
}

It will remove outline from all inputs on web :)

Yeah as same as @nirbhayph I don't have any css file, Im using expo to build the web project and I can't find any forceful answer for this issue

[actuallymentor]

I ended up doing this:

import { Platform } from 'react-native'

const noGlow = `
textarea, select, input, button {
    -webkit-appearance: none;
    outline: none!important;
}
textarea:focus, select:focus, input:focus, button:focus {
    -webkit-appearance: none;
    outline: none!important;
}
`

export const injectWebCss = f => {

    // Only on web
    if ( !Platform.OS == 'web' ) return

    // Inject style
    const style = document.createElement('style')
    style.textContent = `textarea, select, input, button { outline: none!important; }`
    return document.head.append(style)

}

// 👉 And this in the App.js file
injectWebCss()

[satya164]

You don't need a CSS file or use DOM APIs, just render a style tag like this somewhere on Web:

<style type="text/css">{`
  .js-focus-visible :focus:not(.focus-visible) {
    outline: none;
  }
`}</style>

And use this polyfill: https://github.com/WICG/focus-visible

Don't hide focus outlines everywhere. It's bad for accessibility. People relying on keyboard navigation need it to identify focused elements, removing it because it looks ugly to you means they can't use your product anymore. However, you can use the above polyfill, and hide it for non-keyboard users while still having it for keyboard users.

[actuallymentor]

just render a style tag like this somewhere on Web

We're writing in react-native so yes we do (unless you bootleg-edit the source HTML of react-native-web which I avoid).

Don't hide focus outlines everywhere. It's bad for accessibility.

That is entirely dependent on your usecase. react-native-paper has custom highlight animations which are sufficient for input elements. Note that my above CSS only applies to those elements.

[satya164]

We're writing in react-native so yes we do (unless you bootleg-edit the source HTML of react-native-web which I avoid).

You can just add a platform check like you did with DOM manipulation. There's no reason to edit the source of react native web.

That is entirely dependent on your usecase. react-native-paper has custom highlight animations which are sufficient for input elements.

You're also disabling focus outline on buttons. There's no special focus styling for buttons.

[actuallymentor]

You can just add a platform check like you did with DOM manipulation

That's exactly what I did. Your point?

You're also disabling focus outline on buttons. There's no special focus styling for buttons.

Fair.

[satya164]

That's exactly what I did. Your point?

"My point" is that you can write simpler and declarative JSX code instead of more complex and imperative code.

[actuallymentor]

Potato/potaeto, I'm glad we both found our favourite ways.

[satya164]

Not sure why you're being rude when I just shared a simpler way to achieve what you want, but it was really nice talking to you.