question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Customizing inputProps onBlur and onFocus on TextField

See original GitHub issue

I 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:closed
  • Created 5 years ago
  • Comments:11 (11 by maintainers)

github_iconTop GitHub Comments

1reaction
serendipity1004commented, Nov 9, 2018

@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

1reaction
oliviertassinaricommented, Nov 8, 2018

@eps1lon Oh, yes, we don’t handle chaining for inputProps. I’m in favor of raising a warning.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found