Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(form-field): outline gap not being calculated when element starts off invisible #13477

Merged
merged 1 commit into from
Dec 6, 2018

Conversation

crisbeto
Copy link
Member

@crisbeto crisbeto commented Oct 7, 2018

Fixes the gaps for a mat-form-field with the outline appearance not being calculated properly if the element starts off as being invisible and then becomes visible later.

Fixes #13328.

@crisbeto crisbeto added the target: patch This PR is targeted for the next patch release label Oct 7, 2018
@crisbeto crisbeto requested a review from mmalerba as a code owner October 7, 2018 11:19
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Oct 7, 2018
private _outlineGapCalculationNeededImmediately = false;

/** Whether the outline gap needs to be calculated next time the zone has stabilized. */
private _outlineGapCalculationNeededOnStable = false;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mmalerba I'm not a fan of this extra flag, but it was necessary, because in some cases the resizing has to happen a little bit after change detection has run, otherwise the element may not be laid out yet. It may be worth considering removing the ngAfterContentChecked and only relying on NgZone.onStable, however I'm not sure whether it wouldn't cause users to see the wrong outline for a split second.

@mmalerba
Copy link
Contributor

mmalerba commented Oct 7, 2018

This makes the code really messy and it's something we've stated before isn't really supported (setting display: none; on components that need to do measurements). I responded on the issue with a workaround, but I think we probably shouldn't make this change.

@crisbeto
Copy link
Member Author

crisbeto commented Oct 8, 2018

I agree that it's messy, but the reason I did it is that it's non-trivial for people to handle themselves. The issue with the workaround is that removing the display: none means that people can tab into the input, even though it's invisible. I think that we can make it a lot cleaner by not having two code paths as we do now (one in onStable and another one in ngAfterContentChecked), but only one in onStable which should handle both cases. I didn't do the proper solution, because the NgZone is still an optional parameter in order to avoid breaking changes.

@crisbeto crisbeto added the needs: discussion Further discussion with the team is needed before proceeding label Oct 8, 2018
@mmalerba mmalerba added pr: lgtm action: merge The PR is ready for merge by the caretaker and removed needs: discussion Further discussion with the team is needed before proceeding labels Oct 8, 2018
@ngbot
Copy link

ngbot bot commented Oct 17, 2018

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

3 similar comments
@ngbot
Copy link

ngbot bot commented Oct 17, 2018

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

@ngbot
Copy link

ngbot bot commented Oct 17, 2018

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

@ngbot
Copy link

ngbot bot commented Oct 17, 2018

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

… off invisible

Fixes the gaps for a `mat-form-field` with the `outline` appearance not being calculated properly if the element starts off as being invisible and then becomes visible later.

Fixes angular#13328.
@crisbeto crisbeto force-pushed the 13328/form-field-invisible branch from 8e233d5 to 3a364f4 Compare October 18, 2018 18:56
@mmalerba mmalerba merged commit e579181 into angular:master Dec 6, 2018
mmalerba pushed a commit that referenced this pull request Dec 10, 2018
… off invisible (#13477)

Fixes the gaps for a `mat-form-field` with the `outline` appearance not being calculated properly if the element starts off as being invisible and then becomes visible later.

Fixes #13328.
josephperrott pushed a commit to josephperrott/components that referenced this pull request Jan 14, 2019
… off invisible (angular#13477)

Fixes the gaps for a `mat-form-field` with the `outline` appearance not being calculated properly if the element starts off as being invisible and then becomes visible later.

Fixes angular#13328.
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 10, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Floating labels have no gap in table expandable rows with outline appearance
3 participants