Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow SelectArrayInput to be variant=outlined #4511

Merged
merged 4 commits into from
May 7, 2020
Merged

Allow SelectArrayInput to be variant=outlined #4511

merged 4 commits into from
May 7, 2020

Conversation

JulienMattiussi
Copy link
Contributor

@JulienMattiussi JulienMattiussi commented Mar 11, 2020 •
edited
Loading

Closes #4439

Issue

variant="outlined" doesn't work on SelectArrayInput

Solution

Apply MUI method to build a valid Select with variant="outlined"
Forked from MUI demo:
https://codesandbox.io/s/material-demo-684eu

Basic usage

<SelectArrayInput
    fullWidth
    variant="outlined"
    source="tags"
    choices={[
       { name: 'Tech', id: 'tech' },
       { name: 'Lifestyle', id: 'lifestyle' },
    ]}
/>

ReferenceArrayInput usage

<ReferenceArrayInput
    reference="tags"
    source="tags"
    fullWidth
    filter={{ published: true }}
>
    <SelectArrayInput variant="outlined" />
</ReferenceArrayInput>

Screenshot

image

@JulienMattiussi JulienMattiussi added the WIP Work In Progress label Mar 11, 2020
@JulienMattiussi JulienMattiussi changed the base branch from master to next March 11, 2020 16:25
fzaninotto
fzaninotto requested changes Mar 12, 2020
View reviewed changes
examples/simple/src/posts/PostEdit.js Outdated Show resolved Hide resolved
packages/ra-ui-materialui/package.json Outdated Show resolved Hide resolved
yarn.lock Outdated Show resolved Hide resolved
@JulienMattiussi JulienMattiussi added RFR Ready For Review and removed WIP Work In Progress labels Mar 12, 2020
fzaninotto
fzaninotto approved these changes Mar 29, 2020
View reviewed changes
Copy link
Member

@fzaninotto fzaninotto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Needs rebase

@JulienMattiussi JulienMattiussi force-pushed the select-array-input-outlined branch from c35b8ec to 7d73684 Compare April 3, 2020 10:04
jdemangeon
jdemangeon suggested changes Apr 14, 2020
View reviewed changes
packages/ra-ui-materialui/src/input/SelectArrayInput.tsx
const inputLabel = useRef(null);
const [labelWidth, setLabelWidth] = useState(0);
useEffect(() => {
setLabelWidth(inputLabel.current.offsetWidth);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

inputLabel.current can be null at mounting. Can you add a check?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think so. the effect will run after the first render, and at that time, the ref will be defined.

@fzaninotto fzaninotto merged commit 9212bf1 into next May 7, 2020
@fzaninotto fzaninotto deleted the select-array-input-outlined branch May 7, 2020 14:51
@fzaninotto fzaninotto added this to the 3.6.0 milestone May 7, 2020
@fzaninotto fzaninotto mentioned this pull request May 7, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@fzaninotto fzaninotto fzaninotto approved these changes

@jdemangeon jdemangeon jdemangeon requested changes

Assignees
No one assigned
Labels
RFR Ready For Review
Projects
None yet
Milestone
3.6.0
Development

Successfully merging this pull request may close these issues.
3 participants
@JulienMattiussi @fzaninotto @jdemangeon