Customizing inputProps onBlur and onFocus on TextField
See original GitHub issueI am using react-final-form
to create forms (I do not want to use redux form because I am using apollo).
The problem is that react-final-form
requires inputProps onBlur
and onFocus
function to be injected to set meta.touched
. If I inject the custom functions into inputProps, TextField loses focus animation (border color change, ripple effect, etc). Is there a way I can integrate external onBlur
and onFocus
functions with the material ui native onBlur
and onFocus
functions?
The code looks like below
render() {
const {
classes, fullWidth, input: {
name, onChange, value, ...restInput
}, meta, label, InputProps, ...rest
} = this.props;
console.log(restInput);
return (
<MuiThemeProvider theme={theme}>
<TextField
{...rest}
id="standard-name"
label={label}
value={value}
name={name}
fullWidth={fullWidth}
onChange={onChange}
helperText={meta.touched ? meta.error : undefined}
margin="normal"
variant="outlined"
inputProps={restInput} //restInput has two functions 'onBlur' and 'onFocus'
error={meta.error && meta.touched}
InputProps={InputProps}
/>
</MuiThemeProvider>
);
}
Issue Analytics
- State:
- Created 5 years ago
- Comments:11 (11 by maintainers)
Top Results From Across the Web
Customizing inputProps onBlur and onFocus on TextField
The problem is that react-final-form requires inputProps onBlur and onFocus function to be injected to set meta.touched . If I inject the custom...
Read more >Unfocus/blur a Material UI input - Stack Overflow
I'm guessing because the input field still thinks it has the focus. I tried adding a blur() but that doesn't seem to do...
Read more >TextField API - Material UI - MUI
Name Type Default
autoComplete string
autoFocus bool false
classes object
Read more >Initializing focus state in React: you might be doing it wrong
This is pretty common if you've built custom form components with some ... function Input(props) { const [hasFocus, setFocus] = useState(false); ...
Read more >Focusing: focus/blur - The Modern JavaScript Tutorial
The focus event is called on focusing, and blur – when the element loses the focus. Let's use them for validation of an...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@eps1lon you are right, if I spread over
TextField
it works perfect. @oliviertassinari sorry for late reply but reproduction is here https://codesandbox.io/s/4jz452p450 the first field has no hover or focus animation but the second does@eps1lon Oh, yes, we don’t handle chaining for
inputProps
. I’m in favor of raising a warning.