You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
SelectDropdown: cleanup code and migrate CSS to webpack (#35086)
* SelectDropdown: replace methods bound in constructor with arrow fns
* SelectDropdown: instanceId doesn't need to be in state and be used for keys
Changes `instanceId` to be an instance property assigned during construction. No need
to put it in state, as it never changes.
Also, don't use `instanceId` to create `key` values. These don't need to be globally unique.
Use them only for DOM element IDs that are used to link elements together with ARIA attributes.
* SelectDropdown: remove props argument of getInitialSelectedItem
We can always read from `this.props`. Even in constructor, because we
called `super( props )`.
* SelectDropdown: comment and improve the getInitialSelectedItem logic
Add comments about what the method does, and fix a bug where a separator
item (specified as `null` in `options`) can potentially crash the `find`.
* SelectDropdown: toggle visibility of dropdown with visibility: hidden
Removes need for smart `tabIndex` logic: hidden elements are automatically
excluded from tab order.
`visibility: hidden`, as opposed to `display: none`, still takes the element
into account when doing layout. Therefore, the dropdown header will continue
to have the width of the widest option in the list.
* SelectDropdown: use arrow functions where appropriate
* SelectDropdown: use modern refs for focusing item links
Replace string ref with a modern one, and create a `focusLink` instance method
to provide API for the parent component that wants to set focus. Replace access
to internal `itemRef.refs.itemLink` property.
* SelectDropdown: replace string ref to dropdownContainer with modern one
* SelectDropdown: replace string itemRefs with modern ones
Use an array of refs to focusable items, set them with a callback, move the `refIndex`
increment inline to calling expression.
* SelectDropdown: cloned children don't need a key
`key` is needed only when passing array of children. In this case, the children
are written as JSX and `key` doesn't need to be added on cloning and mapping 1:1.
* SelectDropdown: only DropdownItem children need to be cloned and amended
Only `DropdownItem` needs a ref (it's focusable and the ref is used to move focus
on up and down keyboard navigation) and an `onClick` handler. Separator and Label
are neither focusable nor clickable.
* SelectDropdown: ignore clicks on Label and Separator, add a11y role
Clicks on label and separator should not bubble to the parent element and
cause the dropdown to close. This patch adds a missing handler to the separator
component (label is already OK). Also adds an a11y role to specify that the element
is not interactive despite having an `onClick` handler.
* SelectDropdown: simplify setting initial state
Can be done by assinging an instance property instead of full constructor.
Also, `getInitialSelectedItem` already handles the case where `options` prop
is not present or empty.
* SelectDropdown: remove unneeded componentWillReceiveProps
Closing the popup when receiving new props doesn't seem to make much sense.
And the initial selected value is set only on initial mount and further changes
of the prop are ignored. That's the common behavior of initial-ish props on
uncontrolled components. For example, native `<input defaultValue="x" />` renders
input box with "x" and doesn't change the value on further rerenders with a different
prop.
* SelectDropdown: no need to look at initial selected item in getSelectedText or Icon
In the `getSelectedText` and `getSelectedIcon` getters, the currently selected value
is always in `this.state.selected`. No need to default to the initial value.
Also, use `_.get` instead of `_.result`, as `icon` and `label` are not functions.
* SelectDropdown: remove ESLint-offending and non-helpful JSDoc comment
* SelectDropdown: fix a11y issues by adding roles and correct ARIA attrs
* SelectDropdown: use the classNames helper better
* SelectDropdown: use Lodash noop for event handler defaults
* SelectDropdown: reorg the code that moves focus, use fewer lodash funcs
* SelectDropdown: export Item, Separator and Label as main component fields
* SelectDropdown: rework docs and devdocs example to use the SelectDropdown._ convention
* SelectDropdown: migrate CSS to webpack
* Update usages of SelectDropdown to use the SelectDropdown.Item convention
* Remove import of SelectDropdown stylesheet from EditorPublishData
* SelectDropdown: return undefined from getInitialSelectedItem
* SelectDropdown: update unit tests
Some of them were quite awful, spying on internal method calls or mocking the whole component instance
instead of testing on the real component and checking its state and JSDOM rendering.
* SelectDropdown: disable some ESLint warnings in docs example
* SelectDropdown: hide the dropdown options when the dropdown is closed
Otherwise, the options element is clickable although it has `visibility: hidden`
and captures clicks on controls that are underneath it.
@@ -92,24 +91,22 @@ Optional bool to disable dropdown item.
92
91
93
92
`onClick`
94
93
95
-
Optional callback that will be applied when a `DropdownItem` has been clicked. This could be used for updating a parent's state, tracking analytics, etc.
94
+
Optional callback that will be applied when a `SelectDropdown.Item` has been clicked. This could be used for updating a parent's state, tracking analytics, etc.
96
95
97
96
### Label
98
97
99
-
An item "label" can be added like as a sibling to `DropdownItem`. The purpose
100
-
of this `DropdownLabel` component is used to display a static item, for example, to group
98
+
An item "label" can be added like as a sibling to `SelectDropdown.Item`. The purpose
99
+
of this `SelectDropdown.Label` component is used to display a static item, for example, to group
101
100
items.
102
101
103
102
### Separator
104
103
105
-
As a sibling to `DropdownItem`, an item "separator" or horizontal line can be used to visually separate items.
104
+
As a sibling to `SelectDropdown.Item`, an item "separator" or horizontal line can be used to visually separate items.
106
105
107
106
0 commit comments