This repository has been archived by the owner on Jan 13, 2025. It is now read-only.
[Select] foundation init may cause style recalculation unnecessarily #5686
Assignees
Labels
Comments
copybara-service bot
pushed a commit
that referenced
this issue
Apr 29, 2020
…to options - Method `layout` and private method `updateLabel` have been collapsed into one `layout` method. The reasoning is partially to reduce redundancy, but also since there's no reason they should be updated separately. The old layout method may have simply been broken since it doesn't update the label, just the notch, but lack of usage meant this problem didn't surface. - `layoutOptions` method can now be called by the client whenever the underlying list elements change (i.e. dynamic server fetch), to ensure that the foundation's state is sync'ed up. When typeahead lands in list foundation, this will also allow an optional call to list's layout method to reinitialize typeahead cache. - The empty "" option is now properly accounted for as an option. Previously it was ignored, so if you initialized the select with "" having the selected class, it wouldn't be sync'ed to the internal state. This meant that selecting a different option via select.value="blah" wouldn't remove the "selected" classes and attributes on the "" option, meaning it would still act like "" is selected even though selected text shows up as "blah". - `foundation.init` is no longer called twice: once by base component.ts and once by select component.ts - `foundation.init` no longer calls `notchOutline` 3 (???) times (closes #5686) - `foundation.init` no longer emits change event (closes #5783). PiperOrigin-RevId: 308892334
copybara-service bot
pushed a commit
that referenced
this issue
Apr 29, 2020
…to options - Method `layout` and private method `updateLabel` have been collapsed into one `layout` method. The reasoning is partially to reduce redundancy, but also since there's no reason they should be updated separately. The old layout method may have simply been broken since it doesn't update the label, just the notch, but lack of usage meant this problem didn't surface. - `layoutOptions` method can now be called by the client whenever the underlying list elements change (i.e. dynamic server fetch), to ensure that the foundation's state is sync'ed up. When typeahead lands in list foundation, this will also allow an optional call to list's layout method to reinitialize typeahead cache. - The empty "" option is now properly accounted for as an option. Previously it was ignored, so if you initialized the select with "" having the selected class, it wouldn't be sync'ed to the internal state. This meant that selecting a different option via select.value="blah" wouldn't remove the "selected" classes and attributes on the "" option, meaning it would still act like "" is selected even though selected text shows up as "blah". - `foundation.init` is no longer called twice: once by base component.ts and once by select component.ts - `foundation.init` no longer calls `notchOutline` 3 (???) times (closes #5686) - `foundation.init` no longer emits change event (closes #5783). PiperOrigin-RevId: 308892334
copybara-service bot
pushed a commit
that referenced
this issue
Apr 29, 2020
…to options - Method `layout` and private method `updateLabel` have been collapsed into one `layout` method. The reasoning is partially to reduce redundancy, but also since there's no reason they should be updated separately. The old layout method may have simply been broken since it doesn't update the label, just the notch, but lack of usage meant this problem didn't surface. - `layoutOptions` method can now be called by the client whenever the underlying list elements change (i.e. dynamic server fetch), to ensure that the foundation's state is sync'ed up. When typeahead lands in list foundation, this will also allow an optional call to list's layout method to reinitialize typeahead cache. - The empty "" option is now properly accounted for as an option. Previously it was ignored, so if you initialized the select with "" having the selected class, it wouldn't be sync'ed to the internal state. This meant that selecting a different option via select.value="blah" wouldn't remove the "selected" classes and attributes on the "" option, meaning it would still act like "" is selected even though selected text shows up as "blah". (closes #5646) - `foundation.init` is no longer called twice: once by base component.ts and once by select component.ts - `foundation.init` no longer calls `notchOutline` 3 (???) times (closes #5686) - `foundation.init` no longer emits change event (closes #5783). PiperOrigin-RevId: 308892334
copybara-service bot
pushed a commit
that referenced
this issue
Apr 29, 2020
…to options - Method `layout` and private method `updateLabel` have been collapsed into one `layout` method. The reasoning is partially to reduce redundancy, but also since there's no reason they should be updated separately. The old layout method may have simply been broken since it doesn't update the label, just the notch, but lack of usage meant this problem didn't surface. - `layoutOptions` method can now be called by the client whenever the underlying list elements change (i.e. dynamic server fetch), to ensure that the foundation's state is sync'ed up. When typeahead lands in list foundation, this will also allow an optional call to list's layout method to reinitialize typeahead cache. (closes #5646) - The empty "" option is now properly accounted for as an option. Previously it was ignored, so if you initialized the select with "" having the selected class, it wouldn't be sync'ed to the internal state. This meant that selecting a different option via select.value="blah" wouldn't remove the "selected" classes and attributes on the "" option, meaning it would still act like "" is selected even though selected text shows up as "blah". (closes #5646) - `foundation.init` is no longer called twice: once by base component.ts and once by select component.ts - `foundation.init` no longer calls `notchOutline` 3 (???) times (closes #5686) - `foundation.init` no longer emits change event (closes #5783). PiperOrigin-RevId: 308892334
copybara-service bot
pushed a commit
that referenced
this issue
Apr 30, 2020
…to options - Method `layout` and private method `updateLabel` have been collapsed into one `layout` method. The reasoning is partially to reduce redundancy, but also since there's no reason they should be updated separately. The old layout method may have simply been broken since it doesn't update the label, just the notch, but lack of usage meant this problem didn't surface. - `layoutOptions` method can now be called by the client whenever the underlying list elements change (i.e. dynamic server fetch), to ensure that the foundation's state is sync'ed up. When typeahead lands in list foundation, this will also allow an optional call to list's layout method to reinitialize typeahead cache. (closes #5646) - The empty "" option is now properly accounted for as an option. Previously it was ignored, so if you initialized the select with "" having the selected class, it wouldn't be sync'ed to the internal state. This meant that selecting a different option via select.value="blah" wouldn't remove the "selected" classes and attributes on the "" option, meaning it would still act like "" is selected even though selected text shows up as "blah". (closes #5646) - `foundation.init` is no longer called twice: once by base component.ts and once by select component.ts - `foundation.init` no longer calls `notchOutline` 3 (???) times (closes #5686) - `foundation.init` no longer emits change event (closes #5783). PiperOrigin-RevId: 308892334
copybara-service bot
pushed a commit
that referenced
this issue
Apr 30, 2020
…to options - Method `layout` and private method `updateLabel` have been collapsed into one `layout` method. The reasoning is partially to reduce redundancy, but also since there's no reason they should be updated separately. The old layout method may have simply been broken since it doesn't update the label, just the notch, but lack of usage meant this problem didn't surface. - `layoutOptions` method can now be called by the client whenever the underlying list elements change (i.e. dynamic server fetch), to ensure that the foundation's state is sync'ed up. When typeahead lands in list foundation, this will also allow an optional call to list's layout method to reinitialize typeahead cache. (closes #5646) - The empty "" option is now properly accounted for as an option. Previously it was ignored, so if you initialized the select with "" having the selected class, it wouldn't be sync'ed to the internal state. This meant that selecting a different option via select.value="blah" wouldn't remove the "selected" classes and attributes on the "" option, meaning it would still act like "" is selected even though selected text shows up as "blah". (closes #5646) - `foundation.init` is no longer called twice: once by base component.ts and once by select component.ts - `foundation.init` no longer calls `notchOutline` 3 (???) times (closes #5686) - `foundation.init` no longer emits change event (closes #5783). PiperOrigin-RevId: 308892334
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Bug report
Select, when initialized with a value, causes two style recalculations which are expensive. This is especially bad since it is on
initwhich affects first renderSteps to reproduce
Actual behavior
MDCSelectFoundation.notchOutlineis being called twice on initExpected behavior
MDCSelectFoundation.notchOutlineshould only be called once on initScreenshots
Your Environment:
Additional context
MWC implementation
Possible solution
add an else-if statement before the
updateLabelcall ininitwhere the condition meets whether it was called viasetValueThe text was updated successfully, but these errors were encountered: