React-native-paper: Chrome adding blue border around TextInput

[zelin]

Environment

"react-native-paper": "^3.9.0",
"react-native-web": "~0.11.7",
Expo

Description

I am using InputText as

<TextInput
                    style={{outlineColor: 'rgba(0,0,0,0)', outlineOffset: 0, outlineStyle: 'none', 
                            outlineWidth: 0, backgroundColor: 'white'}}
                    theme={this.textValidationTheme(styles)}
                    mode="flat"
                    ref={o => (this.txtInput = o)}
                    label={this.props.label}
                    //placeholder={this.state.isFocused ? "" : this.props.label}
                    value={this.state.text}
                    onFocus={this.onFocus}
                    onChangeText={this.onChangeText}
                    onBlur={this.onBlur}
                    onSubmitEditing={this.onSubmit}
                    underlineColor={color.lightGray}
                    {...this.props.textInputProps}
                />

It seems that chrome is adding a default blue outline and no modification in outline settings seem to be working..

[jbinda]

here is the walkaround for this. Not sure if we can pass some prop to disable this shadowBox when focused

also here is some old issue about it

[timsonater]

with react native web you can do:

<TextInput
   style={{outline: "none"}}
/>

[jbinda]

@zelin can you confirm if above solution works for you ?

[thorxtecnologia]

with react native web you can do:

<TextInput
   style={{outline: "none"}}
/>

it doesn't work

[jcarraway]

outlineWidth: 0, worked for me

[satya164]

The focus ring is important for accessibility. If you are removing it, you need to make sure that you're not removing it for keyboard users.

You can use this polyfill to achieve this https://github.com/WICG/focus-visible

[Jonatthu]

This is still not working for me

[brandonpearcy]

I'm stuck with this issue as well. Any known workarounds?

[brandonpearcy]

I was able to disable the default blue highlight on react-native-paper TextInputs when using react-native-web like so:

App.css

.disable-outline input {
    outline-width: 0;
}

CustomTextInput.tsx

return (
      <div className={'disable-outline'}>
        <TextInput .../>
     </div>
);

[Menganitou]

@brandonpearcy I'm having problems with your solution. Do I need a babel plugin or something related to transpile the App.css file? Even on the web it throw an error when i write import './App.css'; .

I have replicated your solution but using instead a package called emotion that allows me to embed global css styles in web format without babel plugins. This is just another workaround.

Here it's a live example on expo snack link

[brandonpearcy]

My solution works in a modern create-react-app environment. If I understand correctly, under the hood, CRA is using CSS Modules. More info here: https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/
If you're using a different CSS framework, you'll almost certainly have to adjust the solution. Thanks for sharing a solution using Emotion!

[kamalthebidigital]

This is not working, please help.

<TextInput
          ref={ref1}
          mode={'outlined'}
          returnKeyType={'next'}
          style={{
            width: '100%',
            ...Platform.select({
              web: {
                outlineWidth: 0
              }
            })
          }}
          {...props}
        />