{onRenderLabel({ props: this.props, multiselectAccessibleText }, this._onRenderLabel)}
{comboBoxWrapper}
{(persistMenu || isOpen) &&
@@ -411,7 +459,7 @@ export class ComboBox extends React.Component
{
onRenderList,
onRenderItem,
onRenderOption,
- options: this.state.currentOptions.map((item, index) => ({ ...item, index: index })),
+ options: currentOptions.map((item, index) => ({ ...item, index: index })),
onDismiss: this._onDismiss,
},
this._onRenderContainer,
@@ -510,9 +558,10 @@ export class ComboBox extends React.Component {
tabIndex,
autofill,
iconButtonProps,
+ hoisted: { suggestedDisplayValue },
} = this.props;
- const { isOpen, suggestedDisplayValue } = this.state;
+ const { isOpen } = this.state;
// If the combobox has focus, is multiselect, and has a display string, then use that placeholder
// so that the selected items don't appear to vanish. This is not ideal but it's the only reasonable way
@@ -599,7 +648,7 @@ export class ComboBox extends React.Component {
* True if the defaultVisibleValue equals the suggestedDisplayValue, false otherwise
*/
private _onShouldSelectFullInputValueInAutofillComponentDidUpdate = (): boolean => {
- return this._currentVisibleValue === this.state.suggestedDisplayValue;
+ return this._currentVisibleValue === this.props.hoisted.suggestedDisplayValue;
};
/**
@@ -608,15 +657,13 @@ export class ComboBox extends React.Component {
* @returns the value to pass to the input
*/
private _getVisibleValue = (): string | undefined => {
- const { text, allowFreeform, autoComplete } = this.props;
const {
- selectedIndices,
- currentPendingValueValidIndex,
- currentOptions,
- currentPendingValue,
- suggestedDisplayValue,
- isOpen,
- } = this.state;
+ text,
+ allowFreeform,
+ autoComplete,
+ hoisted: { suggestedDisplayValue, selectedIndices, currentOptions },
+ } = this.props;
+ const { currentPendingValueValidIndex, currentPendingValue, isOpen } = this.state;
const currentPendingIndexValid = this._indexWithinBounds(currentOptions, currentPendingValueValidIndex);
@@ -746,7 +793,7 @@ export class ComboBox extends React.Component {
* @param updatedValue - the input's newly changed value
*/
private _processInputChangeWithFreeform(updatedValue: string): void {
- const { currentOptions } = this.state;
+ const { currentOptions } = this.props.hoisted;
let newCurrentPendingValueValidIndex = -1;
// if the new value is empty, see if we have an exact match
@@ -836,7 +883,8 @@ export class ComboBox extends React.Component {
* @param updatedValue - the input's newly changed value
*/
private _processInputChangeWithoutFreeform(updatedValue: string): void {
- const { currentPendingValue, currentPendingValueValidIndex, currentOptions } = this.state;
+ const { currentOptions } = this.props.hoisted;
+ const { currentPendingValue, currentPendingValueValidIndex } = this.state;
if (this.props.autoComplete === 'on') {
// If autoComplete is on while allow freeform is off,
@@ -896,7 +944,9 @@ export class ComboBox extends React.Component {
}
private _getFirstSelectedIndex(): number {
- return this.state.selectedIndices && this.state.selectedIndices.length > 0 ? this.state.selectedIndices[0] : -1;
+ return this.props.hoisted.selectedIndices && this.props.hoisted.selectedIndices.length > 0
+ ? this.props.hoisted.selectedIndices[0]
+ : -1;
}
/**
@@ -908,7 +958,7 @@ export class ComboBox extends React.Component {
* it will snap to the edge of the options array. If delta == 0 and the given index is not selectable
*/
private _getNextSelectableIndex(index: number, searchDirection: SearchDirection): number {
- const { currentOptions } = this.state;
+ const { currentOptions } = this.props.hoisted;
let newIndex = index + searchDirection;
@@ -954,9 +1004,11 @@ export class ComboBox extends React.Component {
submitPendingValueEvent: React.SyntheticEvent,
searchDirection: SearchDirection = SearchDirection.none,
): void {
- const { onChange, onPendingValueChanged } = this.props;
- const { currentOptions } = this.state;
- const { selectedIndices: initialIndices } = this.state;
+ const {
+ onChange,
+ onPendingValueChanged,
+ hoisted: { selectedIndices: initialIndices, currentOptions },
+ } = this.props;
// Clone selectedIndices so we don't mutate state
let selectedIndices = initialIndices ? initialIndices.slice() : [];
@@ -1012,23 +1064,18 @@ export class ComboBox extends React.Component {
changedOptions[index] = option;
// Call onChange after state is updated
- this.setState(
- {
- selectedIndices: selectedIndices,
- currentOptions: changedOptions,
- },
- () => {
- // If ComboBox value is changed, revert preview first
- if (this._hasPendingValue && onPendingValueChanged) {
- onPendingValueChanged();
- this._hasPendingValue = false;
- }
-
- if (onChange) {
- onChange(submitPendingValueEvent, option, index, undefined);
- }
- },
- );
+ this.props.hoisted.setSelectedIndices(selectedIndices);
+ this.props.hoisted.setCurrentOptions(changedOptions);
+
+ // If ComboBox value is changed, revert preview first
+ if (this._hasPendingValue && onPendingValueChanged) {
+ onPendingValueChanged();
+ this._hasPendingValue = false;
+ }
+
+ if (onChange) {
+ onChange(submitPendingValueEvent, option, index, undefined);
+ }
}
}
if (this.props.multiSelect && this.state.isOpen) {
@@ -1060,24 +1107,20 @@ export class ComboBox extends React.Component {
private _onResolveOptions = (): void => {
if (this.props.onResolveOptions) {
// get the options
- const newOptions = this.props.onResolveOptions([...this.state.currentOptions]);
+ const newOptions = this.props.onResolveOptions([...this.props.hoisted.currentOptions]);
// Check to see if the returned value is an array, if it is update the state
// If the returned value is not an array then check to see if it's a promise or PromiseLike.
// If it is then resolve it asynchronously.
if (Array.isArray(newOptions)) {
- this.setState({
- currentOptions: newOptions,
- });
+ this.props.hoisted.setCurrentOptions(newOptions);
} else if (newOptions && newOptions.then) {
// Ensure that the promise will only use the callback if it was the most recent one
// and update the state when the promise returns
const promise: PromiseLike = (this._currentPromise = newOptions);
promise.then((newOptionsFromPromise: IComboBoxOption[]) => {
if (promise === this._currentPromise) {
- this.setState({
- currentOptions: newOptionsFromPromise,
- });
+ this.props.hoisted.setCurrentOptions(newOptionsFromPromise);
}
});
}
@@ -1105,7 +1148,8 @@ export class ComboBox extends React.Component {
if (
relatedTarget &&
// when event coming from withing the comboBox title
- ((this._root.current && this._root.current.contains(relatedTarget as HTMLElement)) ||
+ ((this.props.hoisted.rootRef.current &&
+ this.props.hoisted.rootRef.current.contains(relatedTarget as HTMLElement)) ||
// when event coming from within the comboBox list menu
(this._comboBoxMenu.current &&
(this._comboBoxMenu.current.contains(relatedTarget as HTMLElement) ||
@@ -1131,14 +1175,14 @@ export class ComboBox extends React.Component {
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
private _submitPendingValue(submitPendingValueEvent: React.SyntheticEvent): void {
- const { onChange, allowFreeform, autoComplete } = this.props;
const {
- currentPendingValue,
- currentPendingValueValidIndex,
- currentOptions,
- currentPendingValueValidIndexOnHover,
- } = this.state;
- let { selectedIndices } = this.state;
+ onChange,
+ allowFreeform,
+ autoComplete,
+ hoisted: { currentOptions },
+ } = this.props;
+ const { currentPendingValue, currentPendingValueValidIndex, currentPendingValueValidIndexOnHover } = this.state;
+ let { selectedIndices } = this.props.hoisted;
// Do not submit any pending value if we
// have already initiated clearing the pending info
@@ -1214,10 +1258,8 @@ export class ComboBox extends React.Component {
}
selectedIndices.push(newOptions.length - 1);
}
- this.setState({
- currentOptions: newOptions,
- selectedIndices: selectedIndices,
- });
+ this.props.hoisted.setCurrentOptions(newOptions);
+ this.props.hoisted.setSelectedIndices(selectedIndices);
}
} else if (currentPendingValueValidIndex >= 0) {
// Since we are not allowing freeform, we must have a matching
@@ -1480,10 +1522,10 @@ export class ComboBox extends React.Component {
}
private _isOptionChecked(index: number | undefined): boolean {
- if (this.props.multiSelect && index !== undefined && this.state.selectedIndices) {
+ if (this.props.multiSelect && index !== undefined && this.props.hoisted.selectedIndices) {
let idxOfSelectedIndex = -1;
- idxOfSelectedIndex = this.state.selectedIndices.indexOf(index);
+ idxOfSelectedIndex = this.props.hoisted.selectedIndices.indexOf(index);
return idxOfSelectedIndex >= 0;
}
return false;
@@ -1594,7 +1636,6 @@ export class ComboBox extends React.Component {
private _onItemClick(item: IComboBoxOption): (ev: React.MouseEvent) => void {
const { onItemClick } = this.props;
const { index } = item;
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return (ev: React.MouseEvent): void => {
onItemClick && onItemClick(ev, item, index);
@@ -1635,39 +1676,6 @@ export class ComboBox extends React.Component {
this._resetSelectedIndex();
};
- /**
- * Get the indices of the options that are marked as selected
- * @param options - the comboBox options
- * @param selectedKeys - the known selected keys to find
- * @returns - an array of the indices of the selected options, empty array if nothing is selected
- */
- private _getSelectedIndices(
- options: IComboBoxOption[] | undefined,
- selectedKeys: (string | number | undefined)[],
- ): number[] {
- if (!options || !selectedKeys) {
- return [];
- }
-
- const selectedIndices: { [key: number]: boolean } = {};
- options.forEach((option: IComboBoxOption, index: number) => {
- if (option.selected) {
- selectedIndices[index] = true;
- }
- });
-
- for (const selectedKey of selectedKeys) {
- const index = findIndex(options, option => option.key === selectedKey);
- if (index > -1) {
- selectedIndices[index] = true;
- }
- }
-
- return Object.keys(selectedIndices)
- .map(Number)
- .sort();
- }
-
/**
* Reset the selected index by clearing the
* input (of any pending text), clearing the pending state,
@@ -1675,19 +1683,15 @@ export class ComboBox extends React.Component {
* selected state text
*/
private _resetSelectedIndex(): void {
- const { currentOptions } = this.state;
+ const { currentOptions } = this.props.hoisted;
this._clearPendingInfo();
const selectedIndex: number = this._getFirstSelectedIndex();
if (selectedIndex > 0 && selectedIndex < currentOptions.length) {
- this.setState({
- suggestedDisplayValue: currentOptions[selectedIndex].text,
- });
+ this.props.hoisted.setSuggestedDisplayValue(currentOptions[selectedIndex].text);
} else if (this.props.text) {
// If we had a value initially, restore it
- this.setState({
- suggestedDisplayValue: this.props.text,
- });
+ this.props.hoisted.setSuggestedDisplayValue(this.props.text);
}
}
@@ -1697,11 +1701,11 @@ export class ComboBox extends React.Component {
private _clearPendingInfo(): void {
this._processingClearPendingInfo = true;
+ this.props.hoisted.setSuggestedDisplayValue(undefined);
this.setState(
{
currentPendingValue: undefined,
currentPendingValueValidIndex: -1,
- suggestedDisplayValue: undefined,
currentPendingValueValidIndexOnHover: HoverStatus.default,
},
this._onAfterClearPendingInfo,
@@ -1727,10 +1731,10 @@ export class ComboBox extends React.Component {
return;
}
+ this.props.hoisted.setSuggestedDisplayValue(suggestedDisplayValue);
this.setState({
currentPendingValue: this._normalizeToString(currentPendingValue),
currentPendingValueValidIndex: currentPendingValueValidIndex,
- suggestedDisplayValue: suggestedDisplayValue,
currentPendingValueValidIndexOnHover: HoverStatus.default,
});
}
@@ -1740,7 +1744,7 @@ export class ComboBox extends React.Component {
* @param index - the index to set the pending info from
*/
private _setPendingInfoFromIndex(index: number): void {
- const { currentOptions } = this.state;
+ const { currentOptions } = this.props.hoisted;
if (index >= 0 && index < currentOptions.length) {
const option = currentOptions[index];
@@ -1756,7 +1760,7 @@ export class ComboBox extends React.Component {
* @param searchDirection - the direction to search
*/
private _setPendingInfoFromIndexAndDirection(index: number, searchDirection: SearchDirection): void {
- const { currentOptions } = this.state;
+ const { currentOptions } = this.props.hoisted;
// update index to allow content to wrap
if (searchDirection === SearchDirection.forward && index >= currentOptions.length - 1) {
@@ -1794,12 +1798,8 @@ export class ComboBox extends React.Component {
return;
}
- const {
- currentPendingValue,
- currentOptions,
- currentPendingValueValidIndex,
- currentPendingValueValidIndexOnHover,
- } = this.state;
+ const { currentOptions } = this.props.hoisted;
+ const { currentPendingValue, currentPendingValueValidIndex, currentPendingValueValidIndexOnHover } = this.state;
let newPendingIndex: number | undefined = undefined;
let newPendingValue: string | undefined = undefined;
@@ -1847,8 +1847,13 @@ export class ComboBox extends React.Component