Fix full width TextInput in Filter bug

[AnkitaGupta111]

Closes #4579

[djhi]

Why did you comment this? Does not seem related to the issue. Besides, we don't keep commented out code

[AnkitaGupta111]

i removed this unrelated code changes now in latest commit

[djhi]

Why? Does not seem related to the issue

[AnkitaGupta111]

i removed this unrelated code changes now in latest commit

[fzaninotto]

no, it's still there

[AnkitaGupta111]

I removed alignItems:center property which was not related to this issue but flexGrow:1 is something which helped in fixing bug.

filterFormInput has a parent wrapper form tag in filterForm component and by applying style flexGrow:1 to form ,div tag (inside filterFormInput which is parent of filter text input) style width=100% property is effective and because of parent div can now take full-width,search text input could take up width=100% as well

[fzaninotto]

What bug are you trying to solve?

[fzaninotto]

Nevermind, I didn't see that you referenced an issue in the title.

The GitHub convention is to reference it in the description (I edited yours to match that convention)

[AnkitaGupta111]

@djhi @fzaninotto can you look into this pr

[fzaninotto]

You didn't answer @djhi's comment (see earlier in these PR comments).

[AnkitaGupta111]

@fzaninotto i already removed unrelated code changes @djhi pointed

[macklin-10x]

@djhi @fzaninotto what needs to happen with this PR to get it merged?

[fzaninotto]

I find the result surprising:

const commentFilters = [
    <SearchInput source="q" alwaysOn />,
    <ReferenceInput source="post_id" reference="posts" fullWidth={true}>
        <SelectInput optionText="title" />
    </ReferenceInput>,
];

I'd expect otherwise:

• either the ReferenceInput takes the rest of the available space at the right side of the search input,
• or it takes the full card width, including the space below the buttons

So I'm not sure the fix is correct.