When placeholder text wraps on multiple lines padding is not respected

[zakkor]

Here's an example:

https://codesandbox.io/s/react-select-v3-sandbox-lc9wg

For the second select on the bottom where the placeholder text wraps on 2 lines, I would have expected the select to keep the same padding as the select above, but instead the text crams into the same available space which looks bad. It's because the placeholder is absolutely positioned so the parent container doesn't care about how much space it takes up, and it can't be fixed with margins or padding.

Any idea how to go about fixing this?

[ebonow]

@zakkor The default behavior of placeholder text is to fit inline within an input so it depends on what your definition of a fix is.

1. For inline

const styles = {
  placeholder: inlineCss => ({ ...inlineCss,
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    width: '100%',
    overflow: 'hidden',
    paddingRight: '16px',
  })
}

return <Select styles={styles} />

2. If you wanted to increase the height of the input to fit the placeholder text, you would need to position the placeholder text in the DOM flow by removing position absolute.

Please let me know if this resolves your issue.

[ebonow]

The solution that I actually use is to apply the placeholder text to the actual input element which works since I added a floating label (similar to this) which acts like the Placeholder component, but moves instead of disappears when the user focuses on the input or when there is text in the input. I prefer this approach as it allows even more context and information to the user (ie: Label: 'Location', Placeholder: 'Please enter a city, state, or zip')

const Input = (props) => {
  const { placeholder, label, maxLength } = props.selectProps;
  let inputProps = { ...props, maxLength };

  if (!!placeholder && !!label) {

    inputProps.onFocus = e => {
      const target = e.target;
      setTimeout(() => { target.placeholder = placeholder }, 200);
      props.onFocus(e);
    };

    inputProps.onBlur = e => {
      const target = e.target;
      
      e.target.placeholder = '';
      // In case blur does not happen before onFocus timeout
      setTimeout(() => { target.placeholder = '' }, 200); 
      
      props.onBlur(e);
    };
  }
  
  return (
    <components.Input {...inputProps} />
  );
};

[zakkor]

Thanks for your help!
Unfortunately, my use case was for a MultiSelect (or more specifically a Creatable MultiSelect), so I'm not sure how the floating text solution would work (I tried it and it doesn't seem to).

For point 2: If you remove position: absolute from the placeholder element, it will be in the same flow as the Input element, so we need to make the Input element absolute. But then, the Input element will overlap with the selected multiValues, which is not good. I don't know of any way to fix this.

[ebonow]

@zakkor The floating label requires a bit more complexity as I had to create a custom ValueContainer. I also changed the behavior of the multi select to return a sorted single comma separated value so it displays exactly the same as single select. I can provide more about my implementation if interested.

Back to your use-case, you are correct that the isMulti adds complexity. The reason is that while true the custom styles functions can return the component's state to help you style the component based on certain conditionals, for reasons unknown to me, the Input component does not return common props or state.

As a result, we need to create a ref to the component and access it to determine whether the placeholder text should be visible and if so, set position to absolute. Here is my implementation demonstrating this working for single and multi selects
https://codesandbox.io/s/react-select-v3-sandbox-8zb56?file=/index.js

Let me know if you have any questions. If this resolves your issue, please kindly close the issue. :)

[zakkor]

That solves my issue! Thanks so much for your help @ebonow 🤩