[MDCSelect] Add hidden input element to support HTML forms #5428
Labels
Comments
bonniezhou
changed the title
This was referenced Jan 8, 2020
copybara-service bot
pushed a commit
that referenced
this issue
Apr 13, 2020
… element - `mdc-select__selected-text` has been downgraded to a decorative role, its parent `mdc-select__anchor` will take on all interactivity responsibility. - `mdc-select__anchor` will now use flexbox to align its children instead of hard-coded padding. This means that the order of its children has been changed to reflect the actual order non-absolute-positioned elements appear in DOM (i.e. dropdown icon now appears AFTER selected text) - To ensure pseudo-classes from above change's baseline styles don't clash with ripple, the ripple has been moved to a separate `<span class="mdc-select__ripple">` element. - `mdc-select__selected-text` has been converted from `<div>` to a readonly `<input>` so that it provides a neat baseline for external alignment regardless of whether its inner text is nil. Note this is not directly related to #5428, which requests a hidden input with the select's *value*, not *text*. BREAKING CHANGE: HTML Markup significantly changed, see README; REMOVED adapter methods `isSelectedTextFocused`, `getSelectedTextAttr`, `setSelectedTextAttr`; ADDED adapter methods `isSelectAnchorFocused`, `getSelectAnchorAttr`, `setSelectAnchorAttr`; removed variables `outlined-dense-label-position-y`, `icon-padding`; added variables `minimum-height-for-filled-label`, `filled-baseline-top`, `selected-text-height`, `anchor-padding-left`, `anchor-padding-left-with-leading-icon`, `anchor-padding-right`. PiperOrigin-RevId: 305913109
copybara-service bot
pushed a commit
that referenced
this issue
Apr 13, 2020
… element - `mdc-select__selected-text` has been downgraded to a decorative role, its parent `mdc-select__anchor` will take on all interactivity responsibility. - `mdc-select__anchor` will now use flexbox to align its children instead of hard-coded padding. This means that the order of its children has been changed to reflect the actual order non-absolute-positioned elements appear in DOM (i.e. dropdown icon now appears AFTER selected text) - To ensure pseudo-classes from above change's baseline styles don't clash with ripple, the ripple has been moved to a separate `<span class="mdc-select__ripple">` element. - `mdc-select__selected-text` has been converted from `<div>` to a readonly `<input>` so that it provides a neat baseline for external alignment regardless of whether its inner text is nil. Note this is not directly related to #5428, which requests a hidden input with the select's *value*, not *text*. BREAKING CHANGE: HTML Markup significantly changed, see README; REMOVED adapter methods `isSelectedTextFocused`, `getSelectedTextAttr`, `setSelectedTextAttr`; ADDED adapter methods `isSelectAnchorFocused`, `getSelectAnchorAttr`, `setSelectAnchorAttr`; removed variables `outlined-dense-label-position-y`, `icon-padding`; added variables `minimum-height-for-filled-label`, `filled-baseline-top`, `selected-text-height`, `anchor-padding-left`, `anchor-padding-left-with-leading-icon`, `anchor-padding-right`. PiperOrigin-RevId: 305913109
copybara-service bot
pushed a commit
that referenced
this issue
Apr 13, 2020
… element - `mdc-select__selected-text` has been downgraded to a decorative role, its parent `mdc-select__anchor` will take on all interactivity responsibility. - `mdc-select__anchor` will now use flexbox to align its children instead of hard-coded padding. This means that the order of its children has been changed to reflect the actual order non-absolute-positioned elements appear in DOM (i.e. dropdown icon now appears AFTER selected text) - To ensure pseudo-classes from above change's baseline styles don't clash with ripple, the ripple has been moved to a separate `<span class="mdc-select__ripple">` element. - `mdc-select__selected-text` has been converted from `<div>` to a readonly `<input>` so that it provides a neat baseline for external alignment regardless of whether its inner text is nil. Note this is not directly related to #5428, which requests a hidden input with the select's *value*, not *text*. BREAKING CHANGE: HTML Markup significantly changed, see README; REMOVED adapter methods `isSelectedTextFocused`, `getSelectedTextAttr`, `setSelectedTextAttr`; ADDED adapter methods `isSelectAnchorFocused`, `getSelectAnchorAttr`, `setSelectAnchorAttr`; removed variables `outlined-dense-label-position-y`, `icon-padding`; added variables `minimum-height-for-filled-label`, `filled-baseline-top`, `selected-text-height`, `anchor-padding-left`, `anchor-padding-left-with-leading-icon`, `anchor-padding-right`. PiperOrigin-RevId: 305913109
copybara-service bot
pushed a commit
that referenced
this issue
Apr 13, 2020
… element - `mdc-select__selected-text` has been downgraded to a decorative role, its parent `mdc-select__anchor` will take on all interactivity responsibility. - `mdc-select__anchor` will now use flexbox to align its children instead of hard-coded padding. This means that the order of its children has been changed to reflect the actual order non-absolute-positioned elements appear in DOM (i.e. dropdown icon now appears AFTER selected text) - To ensure pseudo-classes from above change's baseline styles don't clash with ripple, the ripple has been moved to a separate `<span class="mdc-select__ripple">` element. - `mdc-select__selected-text` has been converted from `<div>` to a readonly `<input>` so that it provides a neat baseline for external alignment regardless of whether its inner text is nil. Note this is not directly related to #5428, which requests a hidden input with the select's *value*, not *text*. BREAKING CHANGE: HTML Markup significantly changed, see README; REMOVED adapter methods `isSelectedTextFocused`, `getSelectedTextAttr`, `setSelectedTextAttr`; ADDED adapter methods `isSelectAnchorFocused`, `getSelectAnchorAttr`, `setSelectAnchorAttr`; removed variables `outlined-dense-label-position-y`, `icon-padding`; added variables `minimum-height-for-filled-label`, `filled-baseline-top`, `selected-text-height`, `anchor-padding-left`, `anchor-padding-left-with-leading-icon`, `anchor-padding-right`. PiperOrigin-RevId: 305913109
copybara-service bot
pushed a commit
that referenced
this issue
Apr 13, 2020
… element - `mdc-select__selected-text` has been downgraded to a decorative role, its parent `mdc-select__anchor` will take on all interactivity responsibility. - `mdc-select__anchor` will now use flexbox to align its children instead of hard-coded padding. This means that the order of its children has been changed to reflect the actual order non-absolute-positioned elements appear in DOM (i.e. dropdown icon now appears AFTER selected text) - To ensure pseudo-classes from above change's baseline styles don't clash with ripple, the ripple has been moved to a separate `<span class="mdc-select__ripple">` element. - `mdc-select__selected-text` has been converted from `<div>` to a readonly `<input>` so that it provides a neat baseline for external alignment regardless of whether its inner text is nil. Note this is not directly related to #5428, which requests a hidden input with the select's *value*, not *text*. BREAKING CHANGE: HTML Markup significantly changed, see README; REMOVED adapter methods `isSelectedTextFocused`, `getSelectedTextAttr`, `setSelectedTextAttr`; ADDED adapter methods `isSelectAnchorFocused`, `getSelectAnchorAttr`, `setSelectAnchorAttr`; removed variables `outlined-dense-label-position-y`, `icon-padding`; added variables `minimum-height-for-filled-label`, `filled-baseline-top`, `selected-text-height`, `anchor-padding-left`, `anchor-padding-left-with-leading-icon`, `anchor-padding-right`. PiperOrigin-RevId: 305913109
copybara-service bot
pushed a commit
that referenced
this issue
Apr 15, 2020
… element - `mdc-select__selected-text` has been downgraded to a decorative role, its parent `mdc-select__anchor` will take on all interactivity responsibility. - `mdc-select__anchor` will now use flexbox to align its children instead of hard-coded padding. This means that the order of its children has been changed to reflect the actual order non-absolute-positioned elements appear in DOM (i.e. dropdown icon now appears AFTER selected text) - To ensure pseudo-classes from above change's baseline styles don't clash with ripple, the ripple has been moved to a separate `<span class="mdc-select__ripple">` element. - `mdc-select__selected-text` has been converted from `<div>` to a readonly `<input>` so that it provides a neat baseline for external alignment regardless of whether its inner text is nil. Note this is not directly related to #5428, which requests a hidden input with the select's *value*, not *text*. BREAKING CHANGE: HTML Markup significantly changed, see README; REMOVED adapter methods `isSelectedTextFocused`, `getSelectedTextAttr`, `setSelectedTextAttr`; ADDED adapter methods `isSelectAnchorFocused`, `getSelectAnchorAttr`, `setSelectAnchorAttr`; removed variables `outlined-dense-label-position-y`, `icon-padding`; added variables `minimum-height-for-filled-label`, `filled-baseline-top`, `selected-text-height`, `anchor-padding-left`, `anchor-padding-left-with-leading-icon`, `anchor-padding-right`. PiperOrigin-RevId: 305913109
copybara-service bot
pushed a commit
that referenced
this issue
Apr 15, 2020
… element - `mdc-select__selected-text` has been downgraded to a decorative role, its parent `mdc-select__anchor` will take on all interactivity responsibility. - `mdc-select__anchor` will now use flexbox to align its children instead of hard-coded padding. This means that the order of its children has been changed to reflect the actual order non-absolute-positioned elements appear in DOM (i.e. dropdown icon now appears AFTER selected text) - To ensure pseudo-classes from above change's baseline styles don't clash with ripple, the ripple has been moved to a separate `<span class="mdc-select__ripple">` element. - `mdc-select__selected-text` has been converted from `<div>` to a readonly `<input>` so that it provides a neat baseline for external alignment regardless of whether its inner text is nil. Note this is not directly related to #5428, which requests a hidden input with the select's *value*, not *text*. BREAKING CHANGE: HTML Markup significantly changed, see README; REMOVED adapter methods `isSelectedTextFocused`, `getSelectedTextAttr`, `setSelectedTextAttr`; ADDED adapter methods `isSelectAnchorFocused`, `getSelectAnchorAttr`, `setSelectAnchorAttr`; removed variables `outlined-dense-label-position-y`, `icon-padding`; added variables `minimum-height-for-filled-label`, `filled-baseline-top`, `selected-text-height`, `anchor-padding-left`, `anchor-padding-left-with-leading-icon`, `anchor-padding-right`. PiperOrigin-RevId: 305913109
copybara-service bot
pushed a commit
that referenced
this issue
Apr 15, 2020
… element - `mdc-select__selected-text` has been downgraded to a decorative role, its parent `mdc-select__anchor` will take on all interactivity responsibility. - `mdc-select__anchor` will now use flexbox to align its children instead of hard-coded padding. This means that the order of its children has been changed to reflect the actual order non-absolute-positioned elements appear in DOM (i.e. dropdown icon now appears AFTER selected text) - To ensure pseudo-classes from above change's baseline styles don't clash with ripple, the ripple has been moved to a separate `<span class="mdc-select__ripple">` element. - `mdc-select__selected-text` has been converted from `<div>` to a readonly `<input>` so that it provides a neat baseline for external alignment regardless of whether its inner text is nil. Note this is not directly related to #5428, which requests a hidden input with the select's *value*, not *text*. BREAKING CHANGE: HTML Markup significantly changed, see README; REMOVED adapter methods `isSelectedTextFocused`, `getSelectedTextAttr`, `setSelectedTextAttr`; ADDED adapter methods `isSelectAnchorFocused`, `getSelectAnchorAttr`, `setSelectAnchorAttr`; removed variables `outlined-dense-label-position-y`, `icon-padding`; added variables `minimum-height-for-filled-label`, `filled-baseline-top`, `selected-text-height`, `anchor-padding-left`, `anchor-padding-left-with-leading-icon`, `anchor-padding-right`. PiperOrigin-RevId: 305913109
copybara-service bot
pushed a commit
that referenced
this issue
Apr 15, 2020
… element - `mdc-select__selected-text` has been downgraded to a decorative role, its parent `mdc-select__anchor` will take on all interactivity responsibility. - `mdc-select__anchor` will now use flexbox to align its children instead of hard-coded padding. This means that the order of its children has been changed to reflect the actual order non-absolute-positioned elements appear in DOM (i.e. dropdown icon now appears AFTER selected text) - To ensure pseudo-classes from above change's baseline styles don't clash with ripple, the ripple has been moved to a separate `<span class="mdc-select__ripple">` element. - `mdc-select__selected-text` has been converted from `<div>` to a readonly `<input>` so that it provides a neat baseline for external alignment regardless of whether its inner text is nil. Note this is not directly related to #5428, which requests a hidden input with the select's *value*, not *text*. BREAKING CHANGE: HTML Markup significantly changed, see README; REMOVED adapter methods `isSelectedTextFocused`, `getSelectedTextAttr`, `setSelectedTextAttr`; ADDED adapter methods `isSelectAnchorFocused`, `getSelectAnchorAttr`, `setSelectAnchorAttr`; removed variables `outlined-dense-label-position-y`, `icon-padding`; added variables `minimum-height-for-filled-label`, `filled-baseline-top`, `selected-text-height`, `anchor-padding-left`, `anchor-padding-left-with-leading-icon`, `anchor-padding-right`. PiperOrigin-RevId: 305913109
copybara-service bot
pushed a commit
that referenced
this issue
Apr 22, 2020
… element - `mdc-select__selected-text` has been downgraded to a decorative role, its parent `mdc-select__anchor` will take on all interactivity responsibility. - `mdc-select__anchor` will now use flexbox to align its children instead of hard-coded padding. This means that the order of its children has been changed to reflect the actual order non-absolute-positioned elements appear in DOM (i.e. dropdown icon now appears AFTER selected text) - To ensure pseudo-classes from above change's baseline styles don't clash with ripple, the ripple has been moved to a separate `<span class="mdc-select__ripple">` element. - `mdc-select__selected-text` has been converted from `<div>` to a readonly `<input>` so that it provides a neat baseline for external alignment regardless of whether its inner text is nil. Note this is not directly related to #5428, which requests a hidden input with the select's *value*, not *text*. BREAKING CHANGE: HTML Markup significantly changed, see README; REMOVED adapter methods `isSelectedTextFocused`, `getSelectedTextAttr`, `setSelectedTextAttr`; ADDED adapter methods `isSelectAnchorFocused`, `getSelectAnchorAttr`, `setSelectAnchorAttr`; removed variables `outlined-dense-label-position-y`, `icon-padding`; added variables `minimum-height-for-filled-label`, `filled-baseline-top`, `selected-text-height`, `anchor-padding-left`, `anchor-padding-left-with-leading-icon`, `anchor-padding-right`. PiperOrigin-RevId: 305913109
copybara-service bot
pushed a commit
that referenced
this issue
Apr 22, 2020
… element - `mdc-select__selected-text` has been downgraded to a decorative role, its parent `mdc-select__anchor` will take on all interactivity responsibility. - `mdc-select__anchor` will now use flexbox to align its children instead of hard-coded padding. This means that the order of its children has been changed to reflect the actual order non-absolute-positioned elements appear in DOM (i.e. dropdown icon now appears AFTER selected text) - To ensure pseudo-classes from above change's baseline styles don't clash with ripple, the ripple has been moved to a separate `<span class="mdc-select__ripple">` element. - `mdc-select__selected-text` has been converted from `<div>` to a readonly `<input>` so that it provides a neat baseline for external alignment regardless of whether its inner text is nil. Note this is not directly related to #5428, which requests a hidden input with the select's *value*, not *text*. BREAKING CHANGE: HTML Markup significantly changed, see README; REMOVED adapter methods `isSelectedTextFocused`, `getSelectedTextAttr`, `setSelectedTextAttr`; ADDED adapter methods `isSelectAnchorFocused`, `getSelectAnchorAttr`, `setSelectAnchorAttr`; removed variables `outlined-dense-label-position-y`, `icon-padding`; added variables `minimum-height-for-filled-label`, `filled-baseline-top`, `selected-text-height`, `anchor-padding-left`, `anchor-padding-left-with-leading-icon`, `anchor-padding-right`. PiperOrigin-RevId: 305913109
allan-chen
added a commit
that referenced
this issue
Apr 22, 2020
… element - `mdc-select__selected-text` has been downgraded to a decorative role, its parent `mdc-select__anchor` will take on all interactivity responsibility. - `mdc-select__anchor` will now use flexbox to align its children instead of hard-coded padding. This means that the order of its children has been changed to reflect the actual order non-absolute-positioned elements appear in DOM (i.e. dropdown icon now appears AFTER selected text) - To ensure pseudo-classes from above change's baseline styles don't clash with ripple, the ripple has been moved to a separate `<span class="mdc-select__ripple">` element. - `mdc-select__selected-text` has been converted from `<div>` to a readonly `<input>` so that it provides a neat baseline for external alignment regardless of whether its inner text is nil. Note this is not directly related to #5428, which requests a hidden input with the select's *value*, not *text*. BREAKING CHANGE: HTML Markup significantly changed, see README; REMOVED adapter methods `isSelectedTextFocused`, `getSelectedTextAttr`, `setSelectedTextAttr`; ADDED adapter methods `isSelectAnchorFocused`, `getSelectAnchorAttr`, `setSelectAnchorAttr`; removed variables `outlined-dense-label-position-y`, `icon-padding`; added variables `minimum-height-for-filled-label`, `filled-baseline-top`, `selected-text-height`, `anchor-padding-left`, `anchor-padding-left-with-leading-icon`, `anchor-padding-right`. PiperOrigin-RevId: 307906127
|
Any news on that? |
Only that a related change happened in PR #5811, but it doesn't fully address this issue. |
|
Hi! This is in progress now. Apologies for the wait. |
copybara-service bot
pushed a commit
that referenced
this issue
Aug 11, 2020
#5428 PiperOrigin-RevId: 326096010
copybara-service bot
pushed a commit
that referenced
this issue
Aug 11, 2020
#5428 PiperOrigin-RevId: 326096010
copybara-service bot
pushed a commit
that referenced
this issue
Aug 11, 2020
#5428 PiperOrigin-RevId: 326096010
copybara-service bot
pushed a commit
that referenced
this issue
Aug 11, 2020
#5428 PiperOrigin-RevId: 326096010
copybara-service bot
pushed a commit
that referenced
this issue
Aug 11, 2020
#5428 PiperOrigin-RevId: 326096010
copybara-service bot
pushed a commit
that referenced
this issue
Aug 12, 2020
closes #5428 PiperOrigin-RevId: 326096010
copybara-service bot
pushed a commit
that referenced
this issue
Aug 12, 2020
closes #5428 PiperOrigin-RevId: 326096010
copybara-service bot
pushed a commit
that referenced
this issue
Aug 12, 2020
closes #5428 PiperOrigin-RevId: 326096010
|
@allan-chen great work! We are all waiting for this more than upcoming Christmas :) |
aforemny
pushed a commit
to aforemny/material-components-web
that referenced
this issue
Mar 5, 2021
… element - `mdc-select__selected-text` has been downgraded to a decorative role, its parent `mdc-select__anchor` will take on all interactivity responsibility. - `mdc-select__anchor` will now use flexbox to align its children instead of hard-coded padding. This means that the order of its children has been changed to reflect the actual order non-absolute-positioned elements appear in DOM (i.e. dropdown icon now appears AFTER selected text) - To ensure pseudo-classes from above change's baseline styles don't clash with ripple, the ripple has been moved to a separate `<span class="mdc-select__ripple">` element. - `mdc-select__selected-text` has been converted from `<div>` to a readonly `<input>` so that it provides a neat baseline for external alignment regardless of whether its inner text is nil. Note this is not directly related to material-components#5428, which requests a hidden input with the select's *value*, not *text*. BREAKING CHANGE: HTML Markup significantly changed, see README; REMOVED adapter methods `isSelectedTextFocused`, `getSelectedTextAttr`, `setSelectedTextAttr`; ADDED adapter methods `isSelectAnchorFocused`, `getSelectAnchorAttr`, `setSelectAnchorAttr`; removed variables `outlined-dense-label-position-y`, `icon-padding`; added variables `minimum-height-for-filled-label`, `filled-baseline-top`, `selected-text-height`, `anchor-padding-left`, `anchor-padding-left-with-leading-icon`, `anchor-padding-right`. PiperOrigin-RevId: 307906127
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Since MDC Select does not use a
<select>element, add a hidden<input>element to capture the value in HTML forms.Note that it had previously been added in #3986 but seems like got overlooked in a refactor.
Related issues: #5230 and #5295.
The text was updated successfully, but these errors were encountered: