Using "outlined" variant break Input border

[deluan]

What you were expecting:
Up until version 3.15, using the "outlined" variant in Input fields worked as expected.

What happened instead:
After upgrading to 3.17, if I click on an Input that has variant='outlined', it cuts the border above the first character of the field.

Steps to reproduce:
Just click the field and you can see the border changing:

Screen.Recording.2021-07-26.at.10.01.02.PM.mov

Related code:
Just add the "outlined" variant, PostList.js:44

const postFilter = [
  <SearchInput source="q" alwaysOn variant="outlined" />, 
  <TextInput source="title" defaultValue="Qui tempore rerum et voluptates" />,
  <QuickFilter
    label="resources.posts.fields.commentable"
    source="commentable"
    defaultValue
  />
];

Code Sandbox: https://codesandbox.io/s/gracious-frog-eknfj?file=/src/posts/PostList.tsx:1093-1362

Environment

• React-admin version: 3.17.0 (but was able to reproduce locally with 3.16.5)
• Last version that did not exhibit the issue (if applicable): 3.15 didn't have this bug
• React version: 17
• Browser: Chrome Version 91.0.4472.114 (Official Build) (x86_64)

[djhi]

Thanks for reporting. It looks like we'll have to build an input using lower levels components from MUI for the SearchInput.

[Augani]

Hello @djhi , Can i take this?

[fzaninotto]

@Augani #6470 already proposes a solution for this issue

[Augani]

@fzaninotto ohok,seen

[fzaninotto]

This issue is a regression created by #6381. The right fix is to rollback the code that causes the problem. I'll handle it.

[richardgarnier]

I'm still seeing this issue on 4.4. Did it break again?
In case someone needs it, here the workaround I'm currently using. I'm just replacing the <SearchInput /> by:

<TextInput
  source="q"
  alwaysOn
  label={t('ra.action.search')}
  resettable
  placeholder={t('ra.action.search')}
  InputProps={{
    endAdornment: (
      <InputAdornment position="end">
        <Search color="disabled" />
      </InputAdornment>
    ),
  }}
  size="small"
/>

The idea is to force a label, so that the empty label does not popup. Having label={false} does not work.
We could directly put the label on the SearchInput, and it would work, except for the fact that the component disallow this for seemingly no reason.

[niccmac]

This also happens in the Time Input

[fzaninotto]

Could you please open a new issue with a reproduction?