React-admin: Display issue: ReferenceInput + SelectInput + allowEmpty shows too small blank entry in select list

[qpointsystems]

What you were expecting:
When using a ReferenceInput around a SelectInput where the ReferenceInput has allowEmpty set, I'd expect a blank selection choice with the same height in units as a normal/regular choice.

What happened instead:
The blank select seems to be a fraction (perhaps 10%) of the regular choice size and you can miss it actually being there and have a tester say 'where did the blank choice go', haha.

Steps to reproduce:

    <ArrayInput source="required_assert_contexts" label="Required Assert Contexts">
        <MyFormIterator>                                  
            <FormDataConsumer>
                {({ basePath, getSource, formData, ...rest }) =>  
                    formData.name ? (   
                        <div style={{ width: 1200 }} >
                            <Fragment>
                                <ReferenceInput 
                                    resource="base_sets"
                                    source={getSource('authorityId')} 
                                    label="Authority" 
                                    reference="authorities"  
                                    filter={{ class_id: formData.class_id }}    
                                    sort={{field: 'name', order: 'ASC'}} 
                                    allowEmpty    
                                >                        
                                    <SelectInput label="Authority" optionValue="id" style={{ width: 400 }} />   
                                </ReferenceInput> 
                                <TextInput source={getSource('property')} label="Property" validate={[required(), maxLength(64), regex(/^[a-zA-Z0-9_]*$/)]} style={{ marginLeft: 30, marginRight: 30, width: 400 }}/>
                            </Fragment> 
                        </div>
                    ) : null
                }                              
            </FormDataConsumer>    
        </MyFormIterator>
    </ArrayInput>  

Other information:
See attached screenshot

If you see something in my code that makes someone say "What are you doing you fool!", please don't hesitate to comment

Environment

• React-admin version: 3.0.0-beta.3
• Last version that did not exhibit the issue (if applicable): Pre-Beta
• React version: 16.9.0
• Browser: Chrome
• Stack trace (in case of a JS error): N/A

[Kmaschta]

Thank you for opening this issue. In order to confirm it, we'll have to reproduce it.
As explained in the bug report template, please fork the following CodeSandbox and repeat your issue on it:

https://codesandbox.io/s/github/marmelab/react-admin/tree/next/examples/simple

This is the simplest way to confirm a bug is related to the React Admin codebase.

[fzaninotto]

I can't reproduce it in the simple example with the following code:

// in CommentEdit.js
                        <ReferenceInput
                            source="post_id"
                            reference="posts"
                            perPage={15}
                            sort={{ field: 'title', order: 'ASC' }}
                            fullWidth
                            allowEmpty
                        >
                            <SelectInput
                                optionText="title"
                                options={{ fullWidth: true }}
                            />
                        </ReferenceInput>

So if there is a problem, it's either on your side, or outside of the SelectInput.

Please provide a reproducible test case using the simple example CodeSandbox, as explained by Kevin.

[qpointsystems]

Sounds good. I'll try and recreate here in a sandbox if I can. Cheers!

[MiMo42]

It is a styling problem.
There is a breakpoint at 600px.
< 600px : everything looks right. Min height of items is 48px
greater 600px : style switches to:

@media (min-width: 600px)
.MuiMenuItem-root {
    min-height: auto;
}

Auto mode causes the calculated text height of an empty string to get 0.
The resulting item height results to paddingTop+paddingBottom.
So the issue depends on width of your page.

[MiMo42]

For the records:
An empty item is bad from a UX perspective.
So it should be discouraged anyway.

v3.0.0-alpha.3+ supports new SelectInput property
emptyText

Setting emptyText resolves this issue as auto height mechanism gets something to calculate on.
So set emptyText property to "none" or what best match your needs.

[qpointsystems]

agree with comments regarding UX perspective. Blank/empty item is sub-optimal. Using emptyText option is solution, particularly with SelectInput component

Also from a UX perspective: when using the ReferenceInput+AutocompleteInput, it leaves the User with choice of manually selecting current choice text and clearing. Not perfect, but ok.

I think we can close this. Thank for the work investigating!

[melvynhills]

There is well a styling bug that should be fixed IMHO, regardless of any UX preference.

The empty item is the default behavior provided by NullableBooleanInput which has no prop like emptyText for SelectInput.

A fix is to set a non-breaking space in translations, but feels very hacky:

import english from 'ra-language-english'
english.ra.boolean.null = ' '
// ... locale setup

[Kmaschta]

I reopen this one since I was able to reproduce it on the [example]:

• Go the the following sandbox: https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple
• Edit any comment
• Try to select a post

[cmygray]

I reopen this one since I was able to reproduce it on the [example]:

• Go the the following sandbox: https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple
• Edit any comment
• Try to select a post

I think trying to create a comment is the better way to reproduce the bug. Or you should pass allowEmpty prop to ReferenceInput in CommentEdit.

[WiXSL]

I can't reproduce this with the latest version.

[fzaninotto]

Fixed in #4480

[PavelYzhakov]

It looks like the same problem for AutocompleteInput.
I try to reproduce it in the issue template, but this thing doesn't work.
Just try to replace SelectInput to Autocomplete and "blank select" will be very small.

[Kmaschta]

@PavelYzhakov Thanks, I took care of that one :)