Add OutlinedInput for correct label handling in SelectArrayInput #8465

sebastianbuechler · 2022-12-04T15:41:51Z

Currently, the label of the SelectArrayInput is not handled correctly when pushed upwards:

I used the example code from the react-admin docs: https://marmelab.com/react-admin/SelectArrayInput.html#usage

According to this SO answer this can be fixed directly by MUI: https://mui.com/material-ui/react-select/#MultipleSelectCheckmarks.js

However, I could not test it locally as I was not able to include this fix in my project. I believe I don't properly understand the structure of the react-admin repo in order to consume my fix. I tried it with yarn add https://gitpkg.now.sh/sebastianbuechler/react-admin/packages/react-admin, but on startup, my project can't find react-admin.

sebastianbuechler · 2022-12-04T15:52:41Z

It seems that it does not have the desired effect when opening in the StoryBook:

Could it be that react-admin applies some different default styling to the Select component of MUI?

slax57 · 2022-12-05T10:02:07Z

Just to be sure, could you clear your localStorage and see if the issue is still there?
In the past we had reports of themes being broken because of outdated versions in the store.
Thanks

sebastianbuechler · 2022-12-05T11:02:04Z

Just to be sure, could you clear your localStorage and see if the issue is still there? In the past we had reports of themes being broken because of outdated versions in the store. Thanks

I just tested it with a cleared localStorage and cache, but same result.

If I go to this page: https://mui.com/material-ui/react-select/#MultipleSelectCheckmarks.js And remove the line input={<OutlinedInput label="Tag" />} I get the same result:

slax57 · 2022-12-05T14:18:14Z

@sebastianbuechler

I failed to reproduce the issue by using the outlined variant on a <SelectArrayInput>.

Here is the code I used (inside the SelectArrayInput storybook):

export const Variant = () => (
    <AdminContext i18nProvider={i18nProvider}>
        <Create
            resource="users"
            record={{ roles: ['u001', 'u003'] }}
            sx={{ width: 600 }}
        >
            <SimpleForm>
                <SelectArrayInput
                    source="roles"
                    choices={[
                        { id: 'admin', name: 'Admin' },
                        { id: 'u001', name: 'Editor' },
                        { id: 'u002', name: 'Moderator' },
                        { id: 'u003', name: 'Reviewer' },
                    ]}
                    sx={{ width: 300 }}
                    options={{ variant: 'outlined' }}
                />
            </SimpleForm>
        </Create>
    </AdminContext>
);

Could you provide a repro of the issue?

Besides, I'm a bit worried that your fix will only work for outlined variants. What about other variants?

Lastly, if your PR aims at fixing a bug, it should rather target the master branch.

Thanks.

slax57 · 2022-12-05T14:21:28Z

packages/ra-ui-materialui/src/input/SelectArrayInput.tsx

@@ -253,6 +254,7 @@ export const SelectArrayInput = (props: SelectArrayInputProps) => {
                <Select
                    autoWidth
                    labelId={`${label}-outlined-label`}
+                    input={<OutlinedInput label={label} />}


I'm afraid this will only work with the outlined variant. How about other variants?

slax57 · 2022-12-05T14:21:56Z

packages/ra-ui-materialui/src/input/SelectArrayInput.tsx

@@ -22,6 +22,7 @@ import {
 } from 'ra-core';
 import { InputHelperText } from './InputHelperText';
 import { FormControlProps } from '@mui/material/FormControl';
+import OutlinedInput from '@mui/material/OutlinedInput';


Please put this import along the other ones from '@mui/material'

Will do in the next iteration.

sebastianbuechler · 2022-12-09T08:41:20Z

@sebastianbuechler

I failed to reproduce the issue by using the outlined variant on a <SelectArrayInput>.

Here is the code I used (inside the SelectArrayInput storybook):

export const Variant = () => (
    <AdminContext i18nProvider={i18nProvider}>
        <Create
            resource="users"
            record={{ roles: ['u001', 'u003'] }}
            sx={{ width: 600 }}
        >
            <SimpleForm>
                <SelectArrayInput
                    source="roles"
                    choices={[
                        { id: 'admin', name: 'Admin' },
                        { id: 'u001', name: 'Editor' },
                        { id: 'u002', name: 'Moderator' },
                        { id: 'u003', name: 'Reviewer' },
                    ]}
                    sx={{ width: 300 }}
                    options={{ variant: 'outlined' }}
                />
            </SimpleForm>
        </Create>
    </AdminContext>
);

Could you provide a repro of the issue?

Besides, I'm a bit worried that your fix will only work for outlined variants. What about other variants?

Lastly, if your PR aims at fixing a bug, it should rather target the master branch.

Thanks.

Thank you for your reply.

Here's the replication of the issue: https://stackblitz.com/edit/github-rmhseu-mj4jem?file=src/posts/PostList.tsx

I was not able to easily reproduce it on Storybook, but maybe it would be helpful to have the editable code editor for react-admin storybooks: https://storybook.js.org/addons/storybook-addon-code-editor

Also, you're right, my "fix" would break other variants and I was not aware of them, as we only use the outlined variant.

I found a temporary fix by using:

        <SelectArrayInput
          source="roles"
          variant="outlined"
          choices={[
            { id: 'admin', name: 'Admin' },
            { id: 'u001', name: 'Editor' },
            { id: 'u002', name: 'Moderator' },
            { id: 'u003', name: 'Reviewer' },
          ]}
          options={{ input: <OutlinedInput label="Roles" /> }}
        />

Obviously, this is suboptimal, as the label has to be set twice and it's not intuitive to find this solution.

Interestingly, this bug does not happen for SelectArray with the same outlined variant (I also added it in the Stackblitz).

Do you have any idea how to solve this?

slax57 · 2022-12-13T09:52:36Z

@sebastianbuechler

I was able to reproduce the issue, and I agree there is something wrong on MUI's side.

As stated in their docs, it should choose the correct input variant automatically:

It extends the text field components sub-components, either the OutlinedInput, Input, or FilledInput, depending on the variant selected.

But in their examples with multiple values, they needed to add input={<OutlinedInput label="Name" />} manually...

IMO this is rather something they should fix on their side, so I'd recommend opening an issue on MUI's repo instead.

If you are willing to provide a workaround in the meantime for RA, here is what I got so far.

In SelectArrayInput.tsx, adding the following lines fixes the label for variant "outlined" only.

                <Select
                    autoWidth
                    labelId={`${label}-outlined-label`}
                    multiple
                    error={
                        !!fetchError || ((isTouched || isSubmitted) && invalid)
                    }
                    renderValue={(selected: any[]) => (
                        <div className={SelectArrayInputClasses.chips}>
                            {selected
                                .map(item =>
                                    (allChoices || []).find(
                                        choice =>
                                            getChoiceValue(choice) === item
                                    )
                                )
                                .filter(item => !!item)
                                .map(item => (
                                    <Chip
                                        key={getChoiceValue(item)}
                                        label={renderMenuItemOption(item)}
                                        className={SelectArrayInputClasses.chip}
                                        size="small"
                                    />
                                ))}
                        </div>
                    )}
                    data-testid="selectArray"
                    size="small"
+                   input={
+                       variant === 'outlined' ? (
+                           <OutlinedInput
+                               label={
+                                   <FieldTitle
+                                       label={label}
+                                       source={source}
+                                       resource={resource}
+                                       isRequired={isRequired}
+                                   />
+                               }
+                           />
+                       ) : undefined
+                   }
                    {...field}
                    {...options}
                    onChange={handleChangeWithCreateSupport}
                    value={field.value || []}
                >
                    {finalChoices.map(renderMenuItem)}
                </Select>

But I'd recommend making sure this kind of workaround is not needed for other variants too, for example by adding new stories to the storybook.

slax57 · 2022-12-13T13:51:28Z

Related issue: #8498

sebastianbuechler · 2023-02-13T10:21:03Z

@sebastianbuechler

I was able to reproduce the issue, and I agree there is something wrong on MUI's side.

As stated in their docs, it should choose the correct input variant automatically:

It extends the text field components sub-components, either the OutlinedInput, Input, or FilledInput, depending on the variant selected.

But in their examples with multiple values, they needed to add input={<OutlinedInput label="Name" />} manually...

IMO this is rather something they should fix on their side, so I'd recommend opening an issue on MUI's repo instead.

If you are willing to provide a workaround in the meantime for RA, here is what I got so far.

In SelectArrayInput.tsx, adding the following lines fixes the label for variant "outlined" only.

                <Select
                    autoWidth
                    labelId={`${label}-outlined-label`}
                    multiple
                    error={
                        !!fetchError || ((isTouched || isSubmitted) && invalid)
                    }
                    renderValue={(selected: any[]) => (
                        <div className={SelectArrayInputClasses.chips}>
                            {selected
                                .map(item =>
                                    (allChoices || []).find(
                                        choice =>
                                            getChoiceValue(choice) === item
                                    )
                                )
                                .filter(item => !!item)
                                .map(item => (
                                    <Chip
                                        key={getChoiceValue(item)}
                                        label={renderMenuItemOption(item)}
                                        className={SelectArrayInputClasses.chip}
                                        size="small"
                                    />
                                ))}
                        </div>
                    )}
                    data-testid="selectArray"
                    size="small"
+                   input={
+                       variant === 'outlined' ? (
+                           <OutlinedInput
+                               label={
+                                   <FieldTitle
+                                       label={label}
+                                       source={source}
+                                       resource={resource}
+                                       isRequired={isRequired}
+                                   />
+                               }
+                           />
+                       ) : undefined
+                   }
                    {...field}
                    {...options}
                    onChange={handleChangeWithCreateSupport}
                    value={field.value || []}
                >
                    {finalChoices.map(renderMenuItem)}
                </Select>

But I'd recommend making sure this kind of workaround is not needed for other variants too, for example by adding new stories to the storybook.

Opened a ticket here: mui/material-ui#36164

Add OutlinedInput for correct label handling

e5f827f

vercel bot deployed to Preview – react-admin-storybook December 4, 2022 15:43 View deployment

slax57 requested changes Dec 5, 2022

View reviewed changes

slax57 mentioned this pull request Dec 13, 2022

SelectArrayInput label is crossed by topBorder of the input #8498

Closed

slax57 mentioned this pull request Jan 10, 2023

Add ability to change SelectArrayInput's size prop and fix outlined variant #8562

Merged

sebastianbuechler closed this Feb 13, 2023

sebastianbuechler deleted the next branch February 13, 2023 10:21

sebastianbuechler mentioned this pull request Mar 4, 2023

Fix SelectArrayInput does not display its label correctly in outlined variant #8705

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add OutlinedInput for correct label handling in SelectArrayInput #8465

Add OutlinedInput for correct label handling in SelectArrayInput #8465

sebastianbuechler commented Dec 4, 2022 •

edited

Loading

sebastianbuechler commented Dec 4, 2022

slax57 commented Dec 5, 2022

sebastianbuechler commented Dec 5, 2022

slax57 commented Dec 5, 2022

slax57 Dec 5, 2022

slax57 Dec 5, 2022

sebastianbuechler Dec 9, 2022

sebastianbuechler commented Dec 9, 2022

slax57 commented Dec 13, 2022

slax57 commented Dec 13, 2022

sebastianbuechler commented Feb 13, 2023

Add OutlinedInput for correct label handling in SelectArrayInput #8465

Add OutlinedInput for correct label handling in SelectArrayInput #8465

Conversation

sebastianbuechler commented Dec 4, 2022 • edited Loading

sebastianbuechler commented Dec 4, 2022

slax57 commented Dec 5, 2022

sebastianbuechler commented Dec 5, 2022

slax57 commented Dec 5, 2022

slax57 Dec 5, 2022

Choose a reason for hiding this comment

slax57 Dec 5, 2022

Choose a reason for hiding this comment

sebastianbuechler Dec 9, 2022

Choose a reason for hiding this comment

sebastianbuechler commented Dec 9, 2022

slax57 commented Dec 13, 2022

slax57 commented Dec 13, 2022

sebastianbuechler commented Feb 13, 2023

sebastianbuechler commented Dec 4, 2022 •

edited

Loading