width=100% does not work for List filter text input

[panfiva]

What you were expecting: I have a list filter with one field. I am trying to make text input 100% of width as follows. However it still stays the default width.

const useStylesFilterForm = makeStyles({
  form:{ backgroundColor: 'orange'}
})


const PostFilter = (props) => {
  const classes=useStylesFilterForm();
  return (
    <Filter {...props}  classes={classes} >
      <TextInput label="Search 1" source="id" alwaysOn  fullWidth={true}  />
    </Filter>
  );
}

What happened instead: Although form control received MuiFormControl-fullWidth class which set width:100% on the element), the Text Input Element still remained the original size.

Steps to reproduce: Add PostFilter component as filter to any list

Related code: React admin used the following html code to render filter (notice MuiFormControl-fullWidth applied properly)

<form class="RaFilter-form-194 makeStyles-form-191 RaFilterForm-form-195">
<div data-source="id" class="filter-field RaFilterFormInput-body-197">
<div class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth">...
.

I was able to force Chrome to render 100% width by adding the following styles:

• add flex: "1 0 auto" to form div;

• add width:100% style to the parent div (div data-source="id"); however i was not able to add this style using properties passed TextInput or Filter components:

  • I also noticed that TextInput should accept formClassName property to be applied to the parent div (per https://marmelab.com/react-admin/Inputs.html#common-input-props); However, the following code also did not work, as no styles were applied to the parent div. Additionally, helper Text did not render.

const useStylesFilterForm = makeStyles({
  form:{flex: "1 0 auto"},
  formClassName:{backgroundColor:"red", width:"100%"},
  inputComponent:{width:"100%"}
})


const PostFilter = (props) => {
  const classes=useStylesFilterForm();

  return (
    <Filter {...props}  classes={{form:classes.form}} >
      <TextInput
        resettable
        label="Report Search"
        source="search:reportSearch"
        alwaysOn
        fullWidth={true}
        formClassName={classes.formClassName}
        helperText="Helper text"
        className={classes.inputComponent}
        />
    </Filter>
  );
}

Environment

• React-admin version: 3.3.3
• Last version that did not exhibit the issue (if applicable):
• React version: 16.13.1
• Material UI 4.9.7

[jdemangeon]

Thanks for you issue @panfiva! Can you provide a codesandbox example? So we are able to reproduce.

[panfiva]

https://codesandbox.io/s/adoring-morning-54qgk?file=/src/posts/PostList.js:1087-1146

Go to post list

[fzaninotto]

Confirmed, thanks.

[aliang]

I'd love to see a fix for this eventually. Until then, I was able to make the input full-width by applying the styles @panfiva suggested using material-ui's support for nested styling. It's fragile, though. See https://material-ui.com/styles/basics/#nesting-selectors

const useFilterStyles = makeStyles({
  form: {
    flex: "1 0 auto",
    '& div[data-source=q]': { // Assumes your TextInput source is `q`
      width: "100%",
      '& div:first-child': {
        width: "100%"
      }
    }
  },
});

[jdemangeon]

Hello @aliang!

It sometimes takes a long time to fix reported issues. However, this repository is open-source and everyone is free to contribute. So, feel free to contribute, your PR is welcome ;)

[AnkitaGupta111]

PR Created: #5663

[panfiva]

Just tested this issue with 4.0.0-rc.1, and the issue is still present