Copy-paste using mouse not working

Try to paste something into react-select, using mouse. Many users are trying to do this, because doesn’t know about cmd + v/ctrl + v. This could be fixed by increesing real input width, I guess.

[blkdr]

I fixed it with this (using multi={true}):

CSS

.Select-multi-value-wrapper {
  .Select-placeholder {
    display: none;
  }
}
.Select-multi-value-wrapper > .Select-input > input {
  width: 100%;
}

And this on componentDidUpdate where I use the component:

componentDidUpdate() {
  const searchbar             = ReactDOM.findDOMNode(this.refs.nosoytsundere);
  const valueWrapper          = searchbar.getElementsByClassName('Select-multi-value-wrapper')[0];
  const selectInput           = searchbar.getElementsByClassName('Select-input')[0];
  const input                 = searchbar.querySelector('input[role="combobox"]');
  if(!isNull(input)){
    input.placeholder         = "You current placeholder";
    if(!isEmpty(this.state.value)){
      valueWrapper.style.width  = "auto";
      selectInput.style.width   = "auto";
      input.style.width         = "auto";
      input.placeholder         = "";
    }else{
      valueWrapper.style.width  = "100%";
      selectInput.style.width   = "100%";
      input.style.width         = "100%";
    }
  }
}

render () {
  return (
    <Select.Async
      ref='nosoytsundere'
      multi={true} {...});
}

Hope this help someone c:

[alextaymx]

how to make the input field 100% width