Input box for ui-select multiple forcing text entry at new line, even if values do not take up entire first line

[takotuesday]

Bug description:

Hi I am using ui-select multiple. For some reason in this case, the input box, while being wide enough to fit multiple values, forces a new line after the first selected value. This results in an odd ui to where the user can only add text input when clicking on the beginning of the new line of the input box (below the first selected value), even if there is ample whitespace after the first selected value.

I initially thought it was due to ui-select being in a modal, but Ive since moved it and am still running into the issue.

Version of Angular, UI-Select, and Bootstrap/Select2/Selectize CSS

Angular: 1.4.7

UI-Select: 0.12.1

Bootstrap/Select2/Selectize CSS (if applicable): Select2: 3.4.5

[user378230]

You'll need to provide a reproduction (plnkr or similar) against the latest version of the library (currently v0.16.1) in order for anyone to assist.

---

Will reopen once requested issue updates above are made.

[chuckbass2121]

http://plnkr.co/edit/EaLQj1s9DCpHCPCogfFf?p=preview
you can input others except "red" color, you will see that Input box in the new line.

[user378230]

@chuckbass2121 the plunkr provided is using v0.9.6 the current latest is v0.19.4

[chuckbass2121]

http://plnkr.co/edit/EqTqdb32tQ3pXKAem37y?p=preview

you can see the input box is in the new line, is there any way not to show the input box, but I was wondering if no input box, how to select value again.

[aronmgv]

this is happening again!..
check here - all selects force new lines when there is something already selected..

please advise us how to address this undesired behavior.. thanks.

[fosron]

+1

[aurelienlt]

Oh I haven't seen that this bug was more recent, here is the fix I commented in the old issue.

In the code of the updateIfVisible function, it tries to make the input fit in the line using var inputWidth = containerWidth - input.offsetLeft.

updateIfVisible = function(containerWidth) {
  if (containerWidth === 0) {
    return false;
  }
  var inputWidth = containerWidth - input.offsetLeft;
  if (inputWidth < 50) inputWidth = containerWidth;
  ctrl.searchInput.css('width', inputWidth+'px');
  return true;
}

However it cannot be done since the input is already on the second line. By reducing the input first and enlarging it to the rest of the block, it works:

updateIfVisible = function(containerWidth) {
  if (containerWidth === 0) {
    return false;
  }
  ctrl.searchInput.css('width', '50px');
  setTimeout(function(){
    var inputWidth = Math.max(50, containerWidth - input.offsetLeft - 10);
    ctrl.searchInput.css('width', inputWidth+'px');
  }, 0);
  return true;
}

[hdi-amiri]

any update on this issue?

[SalmanZafar214]

any update on the issue ?