In a Material-UI TextField how can I prevent a label from falling behind an adornment when the input is blurred?

Question

So here's my TextField component:

<TextField fullWidth: true,
              classes,
              helperText: errorText,
              FormHelperTextProps: getInputProps({
                error
              }),
              InputProps: getInputProps({
                error,
                endAdornment: error ? <WarningIcon /> : '',
                startAdornment:
                  selectedItems.length > 0 && Array.isArray(selectedItems)
                    ? selectedItems.map((item, index) => {
                        const itemIndex = seedJson
                          .map(items => {
                            return items.label.toLowerCase();
                          })
                          .indexOf(item);
                        if (itemIndex > -1 && index <= 14) {
                          return (
                            <ChipWrapper
                              key={item + index}
                              tabIndex={-1}
                              label={<ChipContent value={item} index={index} />}
                              deleteIcon={<CloseIconWrapper />}
                              onDelete={this.handleDelete(item)}
                            />
                          );
                        }
                        return (
                          <InvalidChipWrapper
                            key={item + index}
                            tabIndex={-1}
                            label={<ChipContent value={item} index={index} />}
                            deleteIcon={<CloseIconWrapper />}
                            onDelete={this.handleDelete(item)}
                          />
                        );
                      })
                    : undefined,
                onKeyDown: this.handleKeyDown,
                onChange: this.handleInputChange,
                id: 'integration-downshift-multiple'
              })
            })}
/>

Whenever I input text I have a function which takes that value and puts it into array, and then I map through the array to generate the adornments as show above. That returns this:

However, whenver the input loses focus the label then falls behind the adornment like so:

What I've tried:

I've tried adding a " " to the input but that just keeps the label permanently shrunk. I've also tried checking the input for adornment.length & input.length, however the label then only responds when there's text, not onFocus. Any ideas?

Answer 1

TextField contains a prop named InputLabelProps which takes an object. You can pass in shrink: true into that object and the label will shrink and stay shrunk.

<TextField
  label="Wooooo it works"
  InputLabelProps={{
     shrink: true
  }}
/>

See example: https://codesandbox.io/s/6xr6jrzv7r

Documentation: https://material-ui.com/api/text-field/