How to remove focus on inputs after submisssion of form in React

user_12285866 0
Viewed 5472

I'm making a signup form component in React using React hooks and styled components approach. I was able to make the component but after submission, in mozilla (Developer Edition), an outline is set on all input fields. This is not so in chrome though...

Below is the component styling:

const Input = styled.input`
  outline: none;
  padding: 5px;
  margin-bottom: 10px;
  border-radius: 3px;
  border: none;
  line-height: 1.5rem;
  background-color: #F2F2F2;
  &::placeholder {
    opacity: 0.4;
  }

  &:focus,
  &:active {
  border-color: transparent;
  border-bottom: 2px solid #a3a3a3;
}
`;

How do I resolve this issue? Here's what it looks like in the said browser:

enter image description here

styled-components reactjs javascript
2 Answers

Try a conditional css className which you remove the focus className from the input after form submission.

Styled Component CSS: &.hasFocus:focus

Input prop: < Input className={!isSubmitted ? ‘hasFocus’ : {}} / >

Initial state: const [isSubmitted, setIsSubmitted] = React.useState(false);

onSubmit() { ...other code... setIsSubmitted(true) }

Hope this helps!

user_87349680

Try removing border shadow:

&:focus,
&:active {
  ...
  border-shadow: none;
}
user_84542030
Related