feat(select): update the trigger width and overlay state when select is opened #6489

emoralesb05 · 2017-08-15T23:35:22Z

when changing the width of the md-select (e.g. using flex box) after its rendered, the template[cdk-connected-overlay] does not update its minWidth and keeps the initial minWidth every time its opened.

This issue partially happens because the cdk-connected-overlay sets the width, minWidth, etc etc only once and never updates it again.

Here is a plnkr to demonstrate the issue: http://plnkr.co/edit/ERg71p?p=preview

Proposed fix in PR

We just need to set the new _triggerWidth every time the md-select is opened (open()) and update the overlayRef#OverlayState in ConnectedOverlayDirective when the template is attached.

New PR to replace what was stated in #3623

kara

Thanks for the second PR!

kara · 2017-08-16T00:37:15Z

src/lib/select/select.ts

+    /**
+     * Always set the trigger width since we need to
+     * update the panel with its new minWidth when opening it
+     */


Nit: For comments inside methods, we typically use // comment style. Applies throughout PR.

kara · 2017-08-16T01:00:21Z

src/cdk/overlay/overlay-directives.ts

@@ -340,6 +345,8 @@ export class ConnectedOverlayDirective implements OnDestroy, OnChanges {
    this._position.withDirection(this.dir);
    this._overlayRef.getState().direction = this.dir;
    this._initEscapeListener();
+    /** Update the overlay size, in case the directive's inputs have changed */
+    this._configureSize(this._overlayRef.getState());


The getState() method isn't really meant to be used to set state. @jelbourn and I discussed and we think there should be a dedicated method in OverlayRef to set the size props in the state. There is already an updateSize method, but it's really an internal implementation. So let's:

rename the existing updateSize to _setSizeStyles

add a new updateSize method that simply updates the size props in the state

Then you can use the new updateSize to set the props here, instead of getState().

Cool, will do that 😄

Ping me when it's ready! :)

emoralesb05 · 2017-08-16T22:37:50Z

@kara i updated it based on the comments

I wasnt sure if i needed to create a specific interface for the state sizes, but i opted for reusing the OverlayState interface.. just wondering if its worth abstracting width, height, minWidth and minHeight into its own interface for this..

Let me know if i need to change anything else or if i misunderstood anything. 😄

emoralesb05 · 2017-08-17T17:19:29Z

I dont know why the unit test failed for md-menu.. it doesnt fail locally for me..

kara · 2017-08-17T17:21:11Z

@emoralesb05 Don't worry about that test; it's a flake (should be fixed by #6514).

emoralesb05 · 2017-08-17T17:22:35Z

@kara Cool, was all confused about it haha 😄

emoralesb05 · 2017-08-30T18:52:35Z

@kara @crisbeto do i need to do any other changes? saw that this was opened that will affect this one too #6658

jelbourn · 2017-09-26T23:03:47Z

@kara @crisbeto is this change still something we want?

emoralesb05 · 2017-09-29T00:03:09Z

@jelbourn @kara @crisbeto let me know if this is still needed so i can rebase it 😄 since i saw that @crisbeto opened a similar PR

* No longer creates the coverage reports inside of Browserstack. The reports can be generated inside of Chrome Headless that doesn't run remotely on BrowserStack or Saucelabs.

Fixes a few e2e tests that were failing due to subpixel measurement differences.

Due to angular/dgeni-packages#246 the Material docs package used a workaround for accessor types. The issue has been fixed with angular/dgeni-packages#247 and the workaround can be removed now.

Adds a generic parameter to the `MatDialogConfig` that indicates the type of its `data`. BREAKING CHANGE: Material now requires at least TypeScript 2.4. Fixes angular#4398.

The demo app won't build due to PR angular#7630.

Fixes a few obscure test failures on iOS Safari.

…gular#7807) * Currently the select sets the `multiple` and `disableRipple` values on its options manually. In order to avoid "changed after checked" errors we wrap the calls in promises, however this also forces us to have `async` tests which can time out if the browser is out of focus. These changes add a provider that allows for the options to take the value directly from the select. * Refactors some unit tests that have been timing out in Firefox to run in the `fakeAsync` zone instead of the `async` one.

Adds the `gulp test:static` task that is identical to `gulp test`, however it doesn't launch Chrome automatically, which is convenient for debugging any browser that isn't Chrome. Currently the debugging flow for other browsers is running the Gulp task which launches Chrome, waiting for it to finish running the tests, connect the other browser, wait for the new browser to finish and then start debugging. With the new task you can just run the Gulp task and connect and disconnect only the relevant browsers.

Fixes a typo in the directory name of one of the examples.

No longer hides the focus indicator ripple on click/space. Right now if a keyboard user tabs to the checkbox and presses SPACE to toggle the checkbox, the focus indicator ripple disappears. This makes it hard to see what element is focused or not. For comparison, native checkboxes also keep the focus effect on keyboard press. Also Polymer follows the same convention with the focus indicator.

emoralesb05 · 2017-11-29T19:13:54Z

Sure, let me try doing it today @crisbeto 😄

* Adds support for the `opened` input binding. Closes angular#8094

…ngular#8269) Fixes updates to a spinner's value not being saved if they happen while the component is indeterminate, causing it to be wrong if it becomes determinate again.

angular#8270) Fixes the slide label component collapsing down to 16px if it doesn't have a label. Fixes angular#8264.

…gular#8514) Fixes blurry ripples in the slide-toggle, radio and checkbox in Microsoft Edge. The ripples have been blurry because the `border-radius` in an absolute position seems to cause render problems for Edge. Since the ripples are circular by default, the `border-radius` can be removed and the ripple radius just needs to be set to the value that has been set through CSS before this change. This fixes the blurry ripples in MS Edge and might also improve rendering-stability of the ripples. Fixes angular#8392

* demo(list): Add accessibility demo page for list * fix test * set default role for md-list * fix test * Add template file for list

…gular#8674) Gets rid of all the manual stubs of the `OverlayContainer` in the tests and replaces them with getting the container through DI. This removes some boilerplate and should make things less prone to breaking if we make any changes to the container.

* Adds the material-experimental package.

angular#8718)

…on (angular#8099) * Prevents datepickers that are in a fallback position from overlapping their input by adding an offset. * Fixes some inconsistent brace spacing.

…#7857) Currently, when the text of an option is truncated, it ends up removing everything except the ellipsis on Firefox, IE and Edge. These changes fix the truncation and simplify the option view. Relates to angular#7211.

…material2 into select-update-width

emoralesb05 · 2017-12-01T19:36:26Z

Im going to close this PR and opened a new one.. i think i screwed up the rebase somehow haha.. im not really good at it lol

Also, turns out the changes needed are minimal.. so i rather do a diff PR and start over again

emoralesb05 · 2017-12-01T20:00:55Z

@crisbeto @kara i opened #8765 and added a stackblitz with the bug replication 😄

angular-automatic-lock-bot · 2019-09-07T21:01:46Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

emoralesb05 requested review from crisbeto and kara as code owners August 15, 2017 23:35

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Aug 15, 2017

emoralesb05 mentioned this pull request Aug 15, 2017

feat(select): update the trigger width when select is opened #3623

Closed

kara suggested changes Aug 16, 2017

View reviewed changes

kara assigned emoralesb05 Aug 16, 2017

kara added the pr: needs cleanup / tests label Aug 16, 2017

emoralesb05 force-pushed the select-update-width branch from b966ef7 to 311242a Compare August 16, 2017 22:30

kara assigned kara and unassigned emoralesb05 Aug 30, 2017

devversion and others added 13 commits October 12, 2017 14:39

build: create coverage reports in chrome (angular#7714)

7f274b4

* No longer creates the coverage reports inside of Browserstack. The reports can be generated inside of Chrome Headless that doesn't run remotely on BrowserStack or Saucelabs.

build: run tests against ios10 (angular#7707)

0ab6ebe

correct some typos (angular#7697)

a7faebc

build: fix subpixel failures when running locally (angular#7671)

0680481

Fixes a few e2e tests that were failing due to subpixel measurement differences.

chore: remove accessor type workaround (angular#7659)

b6f7f17

Due to angular/dgeni-packages#246 the Material docs package used a workaround for accessor types. The issue has been fixed with angular/dgeni-packages#247 and the workaround can be removed now.

chore(dialog): add generic param for config data (angular#7447)

b29ac45

Adds a generic parameter to the `MatDialogConfig` that indicates the type of its `data`. BREAKING CHANGE: Material now requires at least TypeScript 2.4. Fixes angular#4398.

fix(scroll): Replace references to scrollableReferences (angular#7752)

9673f63

The demo app won't build due to PR angular#7630.

build: fix safari test failures (angular#7785)

26bbeb2

Fixes a few obscure test failures on iOS Safari.

fix unescaped open-close (<>) tags (angular#7756)

288c243

chore: typo in example directory name (angular#7863)

df63ef0

Fixes a typo in the directory name of one of the examples.

build: run tests with firefox headless (angular#7828)

fe08c2b

devversion and others added 12 commits November 29, 2017 11:17

feat(datepicker): add opened input binding (angular#8098)

2b9bc57

* Adds support for the `opened` input binding. Closes angular#8094

fix(progress-spinner): value not updated while in indeterminate mode (a…

9b68b54

…ngular#8269) Fixes updates to a spinner's value not being saved if they happen while the component is indeterminate, causing it to be wrong if it becomes determinate again.

fix(slide-toggle): height collapsing if component doesn't have a label (

8205cb2

angular#8270) Fixes the slide label component collapsing down to 16px if it doesn't have a label. Fixes angular#8264.

demo(list): Add accessibility demo page for list (angular#7020)

b4ce5ec

* demo(list): Add accessibility demo page for list * fix test * set default role for md-list * fix test * Add template file for list

build: add material experimental package (angular#8591)

71305ce

* Adds the material-experimental package.

chore: add webhook notifications for travisCI and CircleCI for testing (

27dfd15

angular#8718)

fix(datepicker): calendar overlapping input when in a fallback positi…

e5b7afe

…on (angular#8099) * Prevents datepickers that are in a fallback position from overlapping their input by adding an offset. * Fixes some inconsistent brace spacing.

feat(select): update the trigger width when select is opened

95d7393

chore(): rebase code

7e7923f

emoralesb05 requested review from amcdnl, andrewseguin, devversion, jelbourn, josephperrott, mmalerba and tinayuangao as code owners December 1, 2017 19:22

emoralesb05 added 2 commits December 1, 2017 11:35

feat(select): update the trigger width when select is opened

a4fb45c

Merge branch 'select-update-width' of https://github.com/emoralesb05/…

bf9555d

…material2 into select-update-width

emoralesb05 closed this Dec 1, 2017

emoralesb05 deleted the select-update-width branch December 1, 2017 19:55

emoralesb05 mentioned this pull request Dec 1, 2017

fix(overlay): dimension not updated after init #8765

Merged

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019

feat(select): update the trigger width and overlay state when select is opened #6489

feat(select): update the trigger width and overlay state when select is opened #6489

Uh oh!

Conversation

emoralesb05 commented Aug 15, 2017

Proposed fix in PR

Uh oh!

kara left a comment

Choose a reason for hiding this comment

Uh oh!

kara Aug 16, 2017

Choose a reason for hiding this comment

Uh oh!

kara Aug 16, 2017

Choose a reason for hiding this comment

Uh oh!

emoralesb05 Aug 16, 2017

Choose a reason for hiding this comment

Uh oh!

kara Aug 16, 2017

Choose a reason for hiding this comment

Uh oh!

emoralesb05 commented Aug 16, 2017

Uh oh!

emoralesb05 commented Aug 17, 2017

Uh oh!

kara commented Aug 17, 2017

Uh oh!

emoralesb05 commented Aug 17, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

emoralesb05 commented Aug 30, 2017

Uh oh!

jelbourn commented Sep 26, 2017

Uh oh!

emoralesb05 commented Sep 29, 2017

Uh oh!

emoralesb05 commented Nov 29, 2017

Uh oh!

emoralesb05 commented Dec 1, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

emoralesb05 commented Dec 1, 2017

Uh oh!

angular-automatic-lock-bot bot commented Sep 7, 2019

Uh oh!

Uh oh!

emoralesb05 commented Aug 17, 2017 •

edited

Loading

emoralesb05 commented Dec 1, 2017 •

edited

Loading