Set border color TextField if field not null

userRlQ91 0
Viewed 37

I have a fairly simple text field (TextField) on my site. When the user enters a value into it, a site search is performed.

I have a question related to the border color of this field. By default (if the field is not clickable) the border color is standard (black). When a user clicks on a field and enters a value, the field borders are blue. BUT after the value is entered into this field and the mouse clicks on any other part of the page, the borders of the field again become the standard color (black). BUT I would like to make it so that if there is any value in the field, the borders of the field would remain blue.

export default function Search({table}) {
　　　　const [input, setInput] = useState(filters.search[table])
    
       return <Stack>
            　　　<TextField     
              　　　　value={input}
             　　　　　InputProps={{ endAdornment: (<CloseButton onClick={() => setInput("")} />) }}
                　　　onChange={(e) => { setInput(e.target.value) }} />
        </Stack>
}

I understand that similar questions about the color of the border have been discussed many times, but in order to be able to choose the color of the border, if there is a value in the field, I have not seen such a solution

material-ui reactjs javascript
1 Answers

If you, instead of using the (e) => setInput... do a function call on the onChange, you could assign the style to the TextField.

So, if (Input != null), then make border color green or whatever color you want it to be.

Hope this helps, let me know if there's more trouble. :)

So to be more exact. instead of:

onChange={(e) => setInput(e.target.value) }

You could do:

onChange = {handleChange(e, value)}

And then you could have:

const handleChange = (e, value) => {
    setInput(e.target.value);
    if(input != null) {
        sx={{borderColor: "#6E9075"}}    
    }
}

something like that. Not entirely sure that would work straight away but with some tweaking that is essentially how I would try and solve it. :)

Olle Strandberg0
Related