componentDidUpdate()

in packages/eui/src/components/selectable/selectable_list/selectable_list.tsx [300:365]


  componentDidUpdate(prevProps: EuiSelectableListProps<T>) {
    const {
      isVirtualized,
      activeOptionIndex,
      visibleOptions,
      options,
      allowExclusions,
      showIcons,
      paddingSize,
      textWrap,
      onFocusBadge,
      searchable,
    } = this.props;

    if (prevProps.activeOptionIndex !== activeOptionIndex) {
      const { makeOptionId } = this.props;

      if (this.listBoxRef && this.props.searchable !== true) {
        this.listBoxRef.setAttribute(
          'aria-activedescendant',
          makeOptionId(activeOptionIndex)
        );
      }

      if (typeof activeOptionIndex !== 'undefined') {
        if (isVirtualized) {
          this.listRef?.scrollToItem(activeOptionIndex, 'auto');
        } else {
          const activeOptionId = `#${makeOptionId(activeOptionIndex)}`;
          const activeOptionEl = this.listBoxRef?.querySelector(activeOptionId);
          if (activeOptionEl) {
            // TODO: we can remove scrollIntoView's conditional chaining once jsdom stubs it
            // @see https://github.com/jsdom/jsdom/issues/1695
            activeOptionEl.scrollIntoView?.({ block: 'nearest' });
          }
        }
      }
    }

    const optionArray = visibleOptions || options;

    if (
      prevProps.visibleOptions !== visibleOptions ||
      prevProps.options !== options
    ) {
      this.setState({
        optionArray,
        itemData: { ...optionArray },
        ...this.calculateAriaSetAttrs(optionArray),
      });
    } else if (isVirtualized) {
      // ensure that ListRow updates based on item props
      if (
        prevProps.allowExclusions !== allowExclusions ||
        prevProps.showIcons !== showIcons ||
        prevProps.paddingSize !== paddingSize ||
        prevProps.textWrap !== textWrap ||
        prevProps.onFocusBadge !== onFocusBadge ||
        prevProps.searchable !== searchable
      ) {
        this.setState({
          itemData: { ...optionArray },
        });
      }
    }
  }