Input box for ui-select multiple ALWAYS forcing text entry at new line

[aronmgv]

Bug description:

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

There is already closed issue for this #1556 undesired behavior.. but for older version. Since I got no help there, opening new issue.

Link to minimally-working plunker that reproduces the issue:

plunker
All selects forces new line when there is at least 1 item selected.. this was not happening before..

Notice also that only like 40% of the line is clickable in order to start typing in it:

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

Angular: 1.6.4
UI-Select: ^0.19.8
Bootstrap/Select2/Selectize CSS (if applicable): ^3.3.7

[Jefiozie]

Hi,

Thanks for the issue, maybe you could have a look where the problem is coming from and make a PR?
Happy to review for you.

[frame]

I didn't find the actual cause yet, but it got introduced in 0.19.7. Reverting back to 0.19.5 fixes the issue.

Update: I believe I found the culprit: 7ad4ef1

[fosron]

+1

[aurelienlt]

Oh I haven't seen it was a recent issue, I commented the older one. Here is the fix I found.

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;
}

[mkeremguc]

also, there is a height problem for multiple. the input's height is shorter when it is empty, at least for bootstrap theme. you can compare multiple input's height with non-multiple

[giacomomasseron]

+1, same problem with chrome

[AbdallaElabd]

Changing this line https://github.com/angular-ui/ui-select/blob/master/dist/select.js#L839
from
var inputWidth = containerWidth - input.offsetLeft;
into
var inputWidth = containerWidth - angular.element(input).offset().left;
fixes it for me.

[ciaran-phillips]

As far as I can tell the root issue is that ui-select is relying on the element's clientWidth property when calculating the available area for the input. clientWidth includes the element's padding, so it overestimates the available area.

Previously, ui-select compensated by subtracting an extra 10px from the container width:

var inputWidth = containerWidth - input.offsetLeft - 10;

But that was removed in 7ad4ef1

Even if that was change was undone, I believe it would still break for anyone who wanted to set a larger custom padding on their element. I think the best solution is probably to take into account the actual computed padding values from window.getComputedStyle(element) when determining available area