Fix issue with the sizing of the text input field

[cmlenz]

Fix issue with the sizing of the text input field when the visibility of the input control is dynamically toggled, for example via the ng-disabled attribute on the <ui-select> element.

The problem is caused by the width calculation getting an incorrect 0 offsetLeft value for the input, as the offsetParent of the input is still null when the controller tries to calculate the width. The fix resolves this by adding a watch for the offsetParent, and only performing the width calculation when both the offsetParent and the container width are available.

I've created a Plunk to demonstrate the issue:

http://plnkr.co/79Ajy18oWP88EopEKAmn

And here's the same example, but with the patch applied:

http://plnkr.co/KdsdBldLBwLRfojjWY24

I've reproduced the problem in Safari, Chrome, Firefox, and IE. The fix works in all of them.

[cmlenz]

Of course, $watchGroup requires Angular 1.3.x or later. I am looking into updating the PR to be compatible with 1.2.x.

[cmlenz]

Here's an updated Plunk:

http://plnkr.co/REjYfJd7HnAoxsiCDv38

[dimirc]

I'm getting failed tests when running new master with this PR merged. From Travis looks ok, but from my laptop I get these fails:

@brianfeister @cmlenz can you reconfirm if you get the same failed tests?

[brianfeister]

On my end, the tests are all passing without issue:

[dimirc]

@brianfeister can you reconfirm that you are in master branch and with the last commit pulled?

[brianfeister]

As it turns out, I was in the feature branch (the one that I merged to master). However, I checked master out just now, rebased from this upstream repo, ran the gulp tests and get the same result as my screenshot above.

[dimirc]

I reverted the commits of this PR on my local master and now again tests are passing

[brianfeister]

Something is wrong with your local environment, I think. Here is me resetting to the merged commit and running the tests, where all pass:

Brians-MacBook-Pro-2:ui-select brianfeister$ git reset --hard origin/master
HEAD is now at 85b560a Merge pull request #712 from cmlenz/fix-input-sizing
Brians-MacBook-Pro-2:ui-select brianfeister$ gulp
[17:17:52] Using gulpfile ~/dev/ui-select/gulpfile.js
[17:17:52] Starting 'clean'...
[17:17:52] Finished 'clean' after 7.77 ms
[17:17:52] Starting 'scripts'...
[17:17:52] Starting 'styles'...
[17:17:52] Finished 'styles' after 60 ms
[17:17:53] Finished 'scripts' after 1.01 s
[17:17:53] Starting 'build'...
[17:17:53] Finished 'build' after 9.75 μs
[17:17:53] Starting 'karma'...
[17:17:54] Finished 'karma' after 262 ms
[17:17:54] Starting 'test'...
[17:17:54] Finished 'test' after 9.11 μs
[17:17:54] Starting 'default'...
[17:17:54] Finished 'default' after 14 μs
INFO [karma]: Karma v0.12.31 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 41.0.2272 (Mac OS X 10.10.1)]: Connected on socket Lmet4l7RJ9gCQoWwQFxz with id 84921161
Chrome 41.0.2272 (Mac OS X 10.10.1): Executed 105 of 105 SUCCESS (2.755 secs / 2.736 secs)
Brians-MacBook-Pro-2:ui-select brianfeister$ 

[brianfeister]

Also keep in mind that both Travis and my local environment are agreeing that the tests pass

Sent from my iPhone

On Mar 8, 2015, at 5:16 PM, Wladimir Coka notifications@github.com wrote:

I reverted the commits on of this PR on my local master and now again tests are passing

�
Reply to this email directly or view it on GitHub.

[dimirc]

@brianfeister yes, for some weird reason I was having this issue but removing bower_components folder and running bower install again did the trick and now its working again. Thanks for the feedback

[AntiFreez]

@cmlenz , please, take a look at bootstrap .form-inline. Placeholder doesn't fit into input.
http://plnkr.co/edit/n05juPKS5ggv8sxkNMKC?p=preview