Customizing inputProps onBlur and onFocus on TextField

[serendipity1004]

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>
        );
    }

[eps1lon]

I guess the component should handle chaining event handlers. They are currently only overridden:
https://github.com/mui-org/material-ui/blob/4eeb7a2e0e308fe8d679cf0decc0008cd64bc4a5/packages/material-ui/src/InputBase/InputBase.js#L423-L433

[serendipity1004]

@eps1lon how do you think the change should be?

[oliviertassinari]

Did you check https://github.com/Deadly0/final-form-material-ui out? I'm using the following integration:

import React from 'react'
import PropTypes from 'prop-types'
import TextField from 'web/modules/components/TextField'

function RFTextField(props) {
  const {
    autoComplete,
    helperText,
    input: { name, ...input },
    InputProps,
    meta: { dirty, error, submitError, submitFailed },
    ...other
  } = props

  return (
    <TextField
      error={Boolean((dirty || submitFailed) && (error || submitError))}
      {...input}
      {...other}
      id={name}
      name={name}
      InputProps={{
        inputProps: {
          autoComplete,
        },
        ...InputProps,
      }}
      helperText={dirty || submitFailed ? error || submitError : helperText}
    />
  )
}

RFTextField.displayName = 'RFTextField'

RFTextField.propTypes = {
  autoComplete: PropTypes.string,
  helperText: PropTypes.node,
  input: PropTypes.shape({
    name: PropTypes.string.isRequired,
  }).isRequired,
  InputProps: PropTypes.object,
  meta: PropTypes.shape({
    dirty: PropTypes.bool.isRequired,
    error: PropTypes.string,
    submitError: PropTypes.string,
    submitFailed: PropTypes.bool.isRequired,
  }).isRequired,
}

export default RFTextField

[oliviertassinari]

I guess the component should handle chaining event handlers.

@eps1lon Don't we already handle chaining?

[oliviertassinari]

@serendipity1004 Do you have a reproduction we can have a look at?

[eps1lon]

I guess the component should handle chaining event handlers.

@eps1lon Don't we already handle chaining?

From the component props but not from the inputProps which is what I expected. It's weird since we clearly document that props are spread to the div but then we handle on(blur|focus|change|keydown) on the input and not on the div which is not how it's documented.

Í understand the confusion of @serendipity1004. Just spread restInput to the TextField and not inputProps.

[oliviertassinari]

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

[serendipity1004]

@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

[joshwooding]

@oliviertassinari @eps1lon For checking when to log the warning is checking inputProps for an array of the props that will be overridden the most efficient way?

[eps1lon]

With a propTypes validator, yes.

But I would also like to remove the @ignore from the on* handlers that are not spread to the div. The current behavior is not documented. Usually we skip the documentation because it's inherent to react and just adds noise. I don't see it that way in this cause. Thoughts @oliviertassinari ?

[oliviertassinari]

I have fixed the chaining in #17037.