@jetbrains/ring-ui 7.0.0-beta.8 → 7.0.0

package/components/select/select.js

@@ -1,4 +1,4 @@
-import { Component, Fragment } from 'react';
+import { Component, Fragment, } from 'react';
 import * as React from 'react';
 import classNames from 'classnames';
 import chevronDownIcon from '@jetbrains/icons/chevron-down';
@@ -42,7 +42,7 @@ export var Type;
 const ICONS_OFFSET = 5;
 const ICON_WIDTH = 20;
 const getStyle = memoize((iconsLength) => ({
-    paddingRight: ICONS_OFFSET + iconsLength * ICON_WIDTH
+    paddingRight: ICONS_OFFSET + iconsLength * ICON_WIDTH,
 }));
 const isInputMode = (type) => type === Type.INPUT || type === Type.INPUT_WITHOUT_CONTROLS;
 function getLowerCaseLabel(item) {
@@ -79,8 +79,11 @@ function buildMultipleMap(selected) {
 }
 function getListItems(props, state, rawFilterString, data = props.data) {
     let filterString = rawFilterString.trim();
-    if (isInputMode(props.type) && !props.allowAny && state.selected &&
-        !Array.isArray(state.selected) && filterString === state.selected.label) {
+    if (isInputMode(props.type) &&
+        !props.allowAny &&
+        state.selected &&
+        !Array.isArray(state.selected) &&
+        filterString === state.selected.label) {
         filterString = ''; // ignore multiple if it is exactly the selected item
     }
     const lowerCaseString = filterString.toLowerCase();
@@ -90,17 +93,17 @@ function getListItems(props, state, rawFilterString, data = props.data) {
     for (let i = 0; i < data.length; i++) {
         const item = { ...data[i] };
         if (check(item, lowerCaseString, data)) {
-            exactMatch = (item.label === filterString);
-            if (props.multiple &&
-                !(typeof props.multiple === 'object' && props.multiple.removeSelectedItems)) {
+            exactMatch = item.label === filterString;
+            if (props.multiple && !(typeof props.multiple === 'object' && props.multiple.removeSelectedItems)) {
                 item.checkbox = !!state.multipleMap?.[item.key];
             }
             if (props.multiple &&
                 typeof props.multiple === 'object' &&
                 props.multiple.limit &&
                 Array.isArray(state.selected)) {
-                item.disabled = props.multiple.limit === state.selected.length &&
-                    !state.selected.find(selectedItem => selectedItem.key === item.key);
+                item.disabled =
+                    props.multiple.limit === state.selected.length &&
+                        !state.selected.find(selectedItem => selectedItem.key === item.key);
             }
             // Ignore item if it's multiple and is already selected
             if (!(props.multiple &&
@@ -113,14 +116,12 @@ function getListItems(props, state, rawFilterString, data = props.data) {
     }
     let addButton = null;
     const { add } = props;
-    if ((add && filterString && !exactMatch) ||
-        (add && add.alwaysVisible)) {
-        if (!(add.regexp && !add.regexp.test(filterString)) &&
-            !(add.minlength && filterString.length < +add.minlength) ||
+    if ((add && filterString && !exactMatch) || (add && add.alwaysVisible)) {
+        if ((!(add.regexp && !add.regexp.test(filterString)) && !(add.minlength && filterString.length < +add.minlength)) ||
             add.alwaysVisible) {
             let label;
             if (add.label) {
-                label = (typeof add.label === 'function') ? add.label(filterString) : add.label;
+                label = typeof add.label === 'function' ? add.label(filterString) : add.label;
             }
             else {
                 label = filterString;
@@ -128,7 +129,7 @@ function getListItems(props, state, rawFilterString, data = props.data) {
             addButton = {
                 prefix: add.prefix,
                 label,
-                delayed: add.delayed ?? true
+                delayed: add.delayed ?? true,
             };
         }
     }
@@ -156,9 +157,7 @@ const getItemLabel = ({ selectedLabel, label }) => {
     }
     return typeof label === 'string' ? label : '';
 };
-const getValueForFilter = (selected, type, filterValue) => (selected && !isArray(selected) && isInputMode(type)
-    ? getItemLabel(selected)
-    : filterValue);
+const getValueForFilter = (selected, type, filterValue) => (selected && !isArray(selected) && isInputMode(type) ? getItemLabel(selected) : filterValue);
 function isSameSelected(prevSelected, selected) {
     if (!prevSelected || !selected || prevSelected.length !== selected.length) {
         return false;
@@ -199,7 +198,7 @@ export default class Select extends Component {
             Popup.PopupProps.Directions.BOTTOM_RIGHT,
             Popup.PopupProps.Directions.BOTTOM_LEFT,
             Popup.PopupProps.Directions.TOP_LEFT,
-            Popup.PopupProps.Directions.TOP_RIGHT
+            Popup.PopupProps.Directions.TOP_RIGHT,
         ],
         selected: null, // current selection (item / array of items)
         label: null, // BUTTON or INPUT label (nothing selected)
@@ -225,7 +224,7 @@ export default class Select extends Component {
         tags: null,
         ringPopupTarget: null,
         dir: 'ltr',
-        offset: 4
+        offset: 4,
     };
     static getDerivedStateFromProps(nextProps, prevState) {
         const { multiple, data, type } = nextProps;
@@ -233,7 +232,7 @@ export default class Select extends Component {
         const nextState = {
             prevData: data,
             prevSelected: nextProps.selected,
-            prevMultiple: multiple
+            prevMultiple: multiple,
         };
         if ('data' in nextProps && data !== prevData) {
             const { filteredData, addButton } = getListItems(nextProps, prevState, filterValue, data);
@@ -241,7 +240,7 @@ export default class Select extends Component {
             if (prevState.selected) {
                 Object.assign(nextState, {
                     selectedIndex: getSelectedIndex(prevState.selected, data),
-                    filterValue: getValueForFilter(prevState.selected, type, filterValue)
+                    filterValue: getValueForFilter(prevState.selected, type, filterValue),
                 });
             }
         }
@@ -250,10 +249,9 @@ export default class Select extends Component {
             const selectedIndex = getSelectedIndex(selected, data || prevData);
             Object.assign(nextState, {
                 selected,
-                filterValue: getValueForFilter(selected, type, filterValue)
+                filterValue: getValueForFilter(selected, type, filterValue),
             });
-            if (!Array.isArray(prevSelected) || !Array.isArray(selected) ||
-                !isSameSelected(prevSelected, selected)) {
+            if (!Array.isArray(prevSelected) || !Array.isArray(selected) || !isSameSelected(prevSelected, selected)) {
                 Object.assign(nextState, { selectedIndex });
             }
         }
@@ -274,10 +272,9 @@ export default class Select extends Component {
     state = {
         data: [],
         shownData: [],
-        selected: (this.props.multiple ? [] : null),
+        selected: this.props.multiple ? [] : null,
         selectedIndex: null,
-        filterValue: this.props.filter && typeof this.props.filter === 'object' &&
-            this.props.filter.value || '',
+        filterValue: (this.props.filter && typeof this.props.filter === 'object' && this.props.filter.value) || '',
         shortcutsEnabled: false,
         popupShortcuts: false,
         showPopup: this.props.showPopup,
@@ -285,7 +282,7 @@ export default class Select extends Component {
         prevSelected: null,
         prevMultiple: this.props.multiple,
         multipleMap: {},
-        addButton: null
+        addButton: null,
     };
     componentDidUpdate(prevProps, prevState) {
         const { showPopup, selected } = this.state;
@@ -310,7 +307,7 @@ export default class Select extends Component {
         this.props.onFocus(e);
         this.setState({
             shortcutsEnabled: true,
-            focused: true
+            focused: true,
         });
     };
     isClickingSelect = false;
@@ -322,8 +319,7 @@ export default class Select extends Component {
     };
     _blurHandler = () => {
         this.props.onBlur();
-        if (this._popup && this._popup.isVisible() && !this._popup.isClickingPopup &&
-            !this.isClickingSelect) {
+        if (this._popup && this._popup.isVisible() && !this._popup.isClickingPopup && !this.isClickingSelect) {
             window.setTimeout(() => {
                 this.setState({ showPopup: false });
             });
@@ -331,7 +327,7 @@ export default class Select extends Component {
         if (!this._popup?.isClickingPopup) {
             this.setState({
                 shortcutsEnabled: false,
-                focused: false
+                focused: false,
             });
         }
     };
@@ -369,11 +365,11 @@ export default class Select extends Component {
         }
         const selected = {
             key: Math.random(),
-            label: this.props.getInitial()
+            label: this.props.getInitial(),
         };
         this.setState({
             selected,
-            filterValue: this.getValueForFilter(selected)
+            filterValue: this.getValueForFilter(selected),
         }, () => {
             this.props.onChange(selected, event);
             this.props.onReset();
@@ -396,9 +392,7 @@ export default class Select extends Component {
     };
     _getResetOption() {
         const isOptionsSelected = Array.isArray(this.state.selected) && this.state.selected.length;
-        const reset = this.props.tags && typeof this.props.tags === 'object'
-            ? this.props.tags.reset
-            : null;
+        const reset = this.props.tags && typeof this.props.tags === 'object' ? this.props.tags.reset : null;
         if (!isOptionsSelected || !reset) {
             return null;
         }
@@ -408,7 +402,7 @@ export default class Select extends Component {
             this.props.onFilter('');
             this.setState(prevState => ({
                 shownData: prevState.shownData.slice(reset.separator ? 2 : 1),
-                multipleMap: {}
+                multipleMap: {},
             }));
             this._redrawPopup();
         };
@@ -421,7 +415,7 @@ export default class Select extends Component {
           {reset.label}
         </Button>),
             glyph: reset.glyph,
-            onClick: resetHandler
+            onClick: resetHandler,
         };
     }
     _prependResetOption(shownData) {
@@ -430,7 +424,7 @@ export default class Select extends Component {
             const resetItems = [resetOption];
             if (resetOption.separator) {
                 resetItems.push({
-                    rgItemType: List.ListProps.Type.SEPARATOR
+                    rgItemType: List.ListProps.Type.SEPARATOR,
                 });
             }
             return resetItems.concat(shownData);
@@ -462,14 +456,14 @@ export default class Select extends Component {
         const shownData = this.getListItems(this.filterValue());
         this.setState({
             showPopup: true,
-            shownData
+            shownData,
         });
     };
     _hidePopup = (tryFocusAnchor) => {
         if (this.node && this.state.showPopup) {
             this.setState(prevState => ({
                 showPopup: false,
-                filterValue: this.props.allowAny ? prevState.filterValue : ''
+                filterValue: this.props.allowAny ? prevState.filterValue : '',
             }));
             if (tryFocusAnchor) {
                 this.focus();
@@ -489,13 +483,13 @@ export default class Select extends Component {
             return null;
         }
         return (<div className={classNames({
-                [styles.toolbar]: Boolean(this.state.addButton || renderBottomToolbar)
+                [styles.toolbar]: Boolean(this.state.addButton || renderBottomToolbar),
             })} data-test="ring-select-toolbar">
         {renderBottomToolbar && renderBottomToolbar()}
         {this.state.addButton && (<Button text delayed={delayed} className={classNames(styles.button, styles.buttonSpaced)} onClick={this.addHandler} data-test="ring-select-toolbar-button">
             {prefix ? `${prefix} ${label}` : label}
           </Button>)}
-        {hint && (<List.ListHint label={hint} data-test="ring-select-toolbar-hint"/>)}
+        {hint && <List.ListHint label={hint} data-test="ring-select-toolbar-hint"/>}
       </div>);
     }
     getTopbar() {
@@ -556,11 +550,11 @@ export default class Select extends Component {
         if (this.props.allowAny) {
             const fakeSelected = {
                 key: Math.random(),
-                label: filterValue
+                label: filterValue,
             };
             this.setState({
                 selected: filterValue === '' ? null : fakeSelected,
-                selectedIndex: null
+                selectedIndex: null,
             }, () => {
                 this.props.onSelect(fakeSelected, event);
                 this.props.onChange(fakeSelected, event);
@@ -581,6 +575,7 @@ export default class Select extends Component {
     _redrawPopup = () => {
         if (this.props.multiple) {
             setTimeout(() => {
+                //setTimeout solves events order and bubbling issue
                 if (this.isInputMode()) {
                     this.clearFilter();
                 }
@@ -595,9 +590,7 @@ export default class Select extends Component {
         if (isSelectItemEvent) {
             event.preventDefault();
         }
-        if ((!isItem(selected) && !isCustomItem(selected)) ||
-            selected.disabled ||
-            selected.isResetItem) {
+        if ((!isItem(selected) && !isCustomItem(selected)) || selected.disabled || selected.isResetItem) {
             return;
         }
         const tryKeepOpen = this.props.tryKeepOpen ?? opts.tryKeepOpen;
@@ -607,11 +600,9 @@ export default class Select extends Component {
             }
             this.setState({
                 selected,
-                selectedIndex: this._getSelectedIndex(selected, this.props.data)
+                selectedIndex: this._getSelectedIndex(selected, this.props.data),
             }, () => {
-                const newFilterValue = this.isInputMode() && !this.props.hideSelected
-                    ? getItemLabel(selected)
-                    : '';
+                const newFilterValue = this.isInputMode() && !this.props.hideSelected ? getItemLabel(selected) : '';
                 this.filterValue(newFilterValue);
                 this.props.onFilter(newFilterValue);
                 this.props.onSelect(selected, event);
@@ -637,14 +628,12 @@ export default class Select extends Component {
                 const nextState = {
                     filterValue: '',
                     selected: nextSelection,
-                    selectedIndex: this._getSelectedIndex(selected, this.props.data)
+                    selectedIndex: this._getSelectedIndex(selected, this.props.data),
                 };
-                if (typeof this.props.multiple === 'object' && this.props.multiple.limit &&
+                if (typeof this.props.multiple === 'object' &&
+                    this.props.multiple.limit &&
                     nextSelection.length === this.props.multiple.limit) {
-                    nextState.shownData = prevState.shownData.
-                        map(item => (nextSelection.find(selectedItem => selectedItem.key === item.key)
-                        ? item
-                        : { ...item, disabled: true }));
+                    nextState.shownData = prevState.shownData.map(item => nextSelection.find(selectedItem => selectedItem.key === item.key) ? item : { ...item, disabled: true });
                 }
                 if (!prevState.multipleMap[selected.key]) {
                     nextState.multipleMap = { ...prevState.multipleMap, [selected.key]: true };
@@ -675,19 +664,16 @@ export default class Select extends Component {
             const currentSelection = prevState.selected;
             let nextSelection;
             if (isSelectAll) {
-                nextSelection = this.props.data.filter(item => (isItem(item) || isCustomItem(item)) &&
-                    !item.disabled);
-                nextSelection.
-                    filter(item => !this.props.selected.
-                    find(selectedItem => item.key === selectedItem.key)).
-                    forEach(item => {
+                nextSelection = this.props.data.filter(item => (isItem(item) || isCustomItem(item)) && !item.disabled);
+                nextSelection
+                    .filter(item => !this.props.selected.find(selectedItem => item.key === selectedItem.key))
+                    .forEach(item => {
                     this.props.onSelect?.(item);
                 });
             }
             else {
                 nextSelection = [];
-                currentSelection.
-                    forEach(item => {
+                currentSelection.forEach(item => {
                     this.props.onDeselect?.(item);
                 });
             }
@@ -695,13 +681,9 @@ export default class Select extends Component {
             return {
                 filterValue: '',
                 selected: nextSelection,
-                selectedIndex: isSelectAll
-                    ? this._getSelectedIndex(nextSelection, this.props.data)
-                    : null,
+                selectedIndex: isSelectAll ? this._getSelectedIndex(nextSelection, this.props.data) : null,
                 shownData: prevState.shownData.map(item => ({ ...item, checkbox: isSelectAll })),
-                multipleMap: isSelectAll
-                    ? buildMultipleMap(this.props.data.filter(item => !item.disabled))
-                    : {}
+                multipleMap: isSelectAll ? buildMultipleMap(this.props.data.filter(item => !item.disabled)) : {},
             };
         }, this._redrawPopup);
     };
@@ -716,7 +698,9 @@ export default class Select extends Component {
                 }
             }
         }
-        const isTagRemoved = this.props.tags && event && event.target &&
+        const isTagRemoved = this.props.tags &&
+            event &&
+            event.target &&
             event.target instanceof Element &&
             event.target.matches('[data-test="ring-tag-remove"]');
         if (!isTagRemoved) {
@@ -734,7 +718,7 @@ export default class Select extends Component {
         this.setState({
             selected: empty,
             selectedIndex: null,
-            filterValue: ''
+            filterValue: '',
         }, () => {
             if (this.props.onChange) {
                 this.props.onChange(empty, event);
@@ -743,8 +727,7 @@ export default class Select extends Component {
         return false;
     };
     _selectionIsEmpty() {
-        return (Array.isArray(this.state.selected) && !this.state.selected.length) ||
-            !this.state.selected;
+        return (Array.isArray(this.state.selected) && !this.state.selected.length) || !this.state.selected;
     }
     _getLabel() {
         return this.props.label ?? this.props.selectedLabel ?? 'Select an option';
@@ -784,8 +767,8 @@ export default class Select extends Component {
         return icons;
     }
     _getAvatar() {
-        return !Array.isArray(this.state.selected) &&
-            (this.state.selected?.avatar || this.state.selected?.showGeneratedAvatar) && (<Avatar className={styles.avatar} url={this.state.selected.avatar} username={this.state.selected.username} size={AvatarSize.Size20}/>);
+        return (!Array.isArray(this.state.selected) &&
+            (this.state.selected?.avatar || this.state.selected?.showGeneratedAvatar) && (<Avatar className={styles.avatar} url={this.state.selected.avatar} username={this.state.selected.username} size={AvatarSize.Size20}/>));
     }
     filter;
     filterRef = (el) => {
@@ -802,7 +785,7 @@ export default class Select extends Component {
             left: noop,
             'shift+up': noop,
             'shift+down': noop,
-            space: noop
+            space: noop,
         };
     }
     renderSelect(activeItemId) {
@@ -811,7 +794,7 @@ export default class Select extends Component {
         const { shortcutsEnabled } = this.state;
         const classes = classNames(styles.select, 'ring-js-shortcuts', this.props.className, styles[`height${this.props.height || this.context}`], {
             [styles[`size${this.props.size}`]]: this.props.type !== Type.INLINE,
-            [styles.disabled]: this.props.disabled
+            [styles.disabled]: this.props.disabled,
         });
         let style;
         let iconsNode;
@@ -824,39 +807,42 @@ export default class Select extends Component {
             ? {
                 'aria-owns': this.listId,
                 'aria-activedescendant': activeItemId,
-                'aria-label': this.props.label ?? undefined
+                'aria-label': this.props.label ?? undefined,
             }
             : {
-                'aria-label': this.props.label ?? undefined
+                'aria-label': this.props.label ?? undefined,
             };
         switch (this.props.type) {
             case Type.INPUT_WITHOUT_CONTROLS:
-            case Type.INPUT: return (<>
-          <div ref={this.nodeRef} className={classNames(classes, styles.inputMode)} data-test={dataTests('ring-select', dataTest)} role="presentation" // has interactive elements inside
-             onMouseDown={this.mouseDownHandler} onMouseUp={this.mouseUpHandler}>
-            {shortcutsEnabled && (<Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>)}
-            <Input {...ariaProps} height={this.props.height} autoComplete="off" id={this.props.id} onClick={this._clickHandler} inputRef={this.composedFilterRef(this.filterRef, this.props.filterRef)} disabled={this.props.disabled} value={this.state.filterValue} borderless={this.props.type === Type.INPUT_WITHOUT_CONTROLS} style={style} size={Size.FULL} onChange={this._filterChangeHandler} onFocus={this._focusHandler} onBlur={this._blurHandler} 
-            // Input with error style without description
-            error={this.props.error != null ? '' : null} label={this.props.type === Type.INPUT ? this._getLabel() : null} placeholder={this.props.inputPlaceholder} onKeyDown={this.props.onKeyDown} data-test="ring-select__focus" enableShortcuts={shortcutsEnabled
-                    ? Object.keys({
-                        ...this.getShortcutsMap(),
-                        ...this._popup?.list?.shortcutsMap
-                    })
-                    : undefined} icon={this.props.filterIcon} afterInput={iconsNode}/>
-            {this._renderPopup()}
-          </div>
-          {this.props.error && (<div className={classNames(inputStyles.errorText, inputStyles[`size${this.props.size}`])}>
-              {this.props.error}
-            </div>)}
-        </>);
+            case Type.INPUT:
+                return (<>
+            <div ref={this.nodeRef} className={classNames(classes, styles.inputMode)} data-test={dataTests('ring-select', dataTest)} role="presentation" // has interactive elements inside
+                 onMouseDown={this.mouseDownHandler} onMouseUp={this.mouseUpHandler}>
+              {shortcutsEnabled && <Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>}
+              <Input {...ariaProps} height={this.props.height} autoComplete="off" id={this.props.id} onClick={this._clickHandler} inputRef={this.composedFilterRef(this.filterRef, this.props.filterRef)} disabled={this.props.disabled} value={this.state.filterValue} borderless={this.props.type === Type.INPUT_WITHOUT_CONTROLS} style={style} size={Size.FULL} onChange={this._filterChangeHandler} onFocus={this._focusHandler} onBlur={this._blurHandler} 
+                // Input with error style without description
+                error={this.props.error != null ? '' : null} label={this.props.type === Type.INPUT ? this._getLabel() : null} placeholder={this.props.inputPlaceholder} onKeyDown={this.props.onKeyDown} data-test="ring-select__focus" enableShortcuts={shortcutsEnabled
+                        ? Object.keys({
+                            ...this.getShortcutsMap(),
+                            ...this._popup?.list?.shortcutsMap,
+                        })
+                        : undefined} icon={this.props.filterIcon} afterInput={iconsNode}/>
+              {this._renderPopup()}
+            </div>
+            {this.props.error && (<div className={classNames(inputStyles.errorText, inputStyles[`size${this.props.size}`])}>
+                {this.props.error}
+              </div>)}
+          </>);
             case Type.BUTTON:
                 return (<div ref={this.nodeRef} className={classNames(classes, styles.buttonMode)} data-test={dataTests('ring-select', dataTest)}>
-            {selectedLabel && (<ControlLabel type={this.props.labelType} disabled={this.props.disabled} htmlFor={this.props.id}>{selectedLabel}</ControlLabel>)}
-            {shortcutsEnabled && (<Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>)}
+            {selectedLabel && (<ControlLabel type={this.props.labelType} disabled={this.props.disabled} htmlFor={this.props.id}>
+                {selectedLabel}
+              </ControlLabel>)}
+            {shortcutsEnabled && <Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>}
             <div className={styles.buttonContainer}>
               <Button {...ariaProps} height={this.props.height} id={this.props.id} onClick={this._clickHandler} className={classNames(this.props.buttonClassName, styles.buttonValue, {
                         [styles.buttonValueOpen]: this.state.showPopup,
-                        [styles.buttonValueEmpty]: this._selectionIsEmpty()
+                        [styles.buttonValueEmpty]: this._selectionIsEmpty(),
                     })} disabled={this.props.disabled} style={style} data-test="ring-select__button ring-select__focus">
                 {this._getAvatar()}
                 {this._getPlaceholder()}
@@ -867,7 +853,7 @@ export default class Select extends Component {
           </div>);
             case Type.INLINE:
                 return (<div className={classes} ref={this.nodeRef} data-test={dataTests('ring-select', dataTest)}>
-            {shortcutsEnabled && (<Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>)}
+            {shortcutsEnabled && <Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>}
             <Anchor {...ariaProps} className={this.props.buttonClassName ?? undefined} id={this.props.id} onClick={this._clickHandler} data-test="ring-select__focus" disabled={this.props.disabled} active={this.state.showPopup}>
               {this._getPlaceholder()}
             </Anchor>
@@ -876,11 +862,11 @@ export default class Select extends Component {
             default:
                 if (this.props.customAnchor) {
                     return (<Fragment>
-              {shortcutsEnabled && (<Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>)}
+              {shortcutsEnabled && <Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>}
               {this.props.customAnchor({
                             wrapperProps: {
                                 ref: this.nodeRef,
-                                'data-test': dataTests('ring-select', dataTest)
+                                'data-test': dataTests('ring-select', dataTest),
                             },
                             buttonProps: {
                                 ...ariaProps,
@@ -888,9 +874,9 @@ export default class Select extends Component {
                                 onClick: this._clickHandler,
                                 disabled: this.props.disabled,
                                 children: this._getPlaceholder(),
-                                'data-test': 'ring-select__focus'
+                                'data-test': 'ring-select__focus',
                             },
-                            popup: this._renderPopup()
+                            popup: this._renderPopup(),
                         })}
             </Fragment>);
                 }

package/components/select/select__filter.js

@@ -8,7 +8,7 @@ import styles from './select-popup.css';
 function noop() { }
 export default class SelectFilter extends Component {
     static defaultProps = {
-        inputRef: noop
+        inputRef: noop,
     };
     componentWillUnmount() {
         this.blur();