diff --git a/src/js/components/Select/SelectContainer.js b/src/js/components/Select/SelectContainer.js index 78579ecf41..5182c3888d 100644 --- a/src/js/components/Select/SelectContainer.js +++ b/src/js/components/Select/SelectContainer.js @@ -74,7 +74,7 @@ const SelectContainer = forwardRef( onMore, onSearch, optionIndexesInValue, - options: optionsProp, + options, allOptions, searchPlaceholder, search, @@ -127,18 +127,18 @@ const SelectContainer = forwardRef( }, [keyboardNavigation]); const optionLabel = useCallback( - index => applyKey(optionsProp[index], labelKey), - [labelKey, optionsProp], + index => applyKey(options[index], labelKey), + [labelKey, options], ); const optionValue = useCallback( - index => applyKey(optionsProp[index], valueKey), - [optionsProp, valueKey], + index => applyKey(options[index], valueKey), + [options, valueKey], ); const isDisabled = useCallback( index => { - const option = optionsProp[index]; + const option = options[index]; let result; if (disabledKey) { result = applyKey(option, disabledKey); @@ -152,7 +152,7 @@ const SelectContainer = forwardRef( } return result; }, - [disabled, disabledKey, optionsProp, optionValue], + [disabled, disabledKey, options, optionValue], ); const isSelected = useCallback( @@ -199,7 +199,7 @@ const SelectContainer = forwardRef( let nextSelected; if (multiple) { const nextOptionIndexesInValue = optionIndexesInValue.slice(0); - const allOptionsIndex = allOptions.indexOf(optionsProp[index]); + const allOptionsIndex = allOptions.indexOf(options[index]); const valueIndex = optionIndexesInValue.indexOf(allOptionsIndex); if (valueIndex === -1) { nextOptionIndexesInValue.push(allOptionsIndex); @@ -215,25 +215,18 @@ const SelectContainer = forwardRef( } else { nextValue = valueKey && valueKey.reduce - ? applyKey(allOptions[index], valueKey) - : allOptions[index]; + ? applyKey(options[index], valueKey) + : options[index]; nextSelected = index; } onChange(event, { - option: allOptions[index], + option: options[index], value: nextValue, selected: nextSelected, }); } }, - [ - multiple, - onChange, - optionIndexesInValue, - optionsProp, - allOptions, - valueKey, - ], + [multiple, onChange, optionIndexesInValue, options, allOptions, valueKey], ); const onClear = useCallback( @@ -248,17 +241,17 @@ const SelectContainer = forwardRef( event.preventDefault(); let nextActiveIndex = activeIndex + 1; while ( - nextActiveIndex < optionsProp.length && + nextActiveIndex < options.length && isDisabled(nextActiveIndex) ) { nextActiveIndex += 1; } - if (nextActiveIndex !== optionsProp.length) { + if (nextActiveIndex !== options.length) { setActiveIndex(nextActiveIndex); setKeyboardNavigation(true); } }, - [activeIndex, isDisabled, optionsProp], + [activeIndex, isDisabled, options], ); const onPreviousOption = useCallback( @@ -343,9 +336,9 @@ const SelectContainer = forwardRef( /> )} - {optionsProp.length > 0 ? ( + {options.length > 0 ? ( { expect(onSearch).toBeCalledWith('o'); }); + test('search and select', () => { + jest.useFakeTimers(); + const onSearch = jest.fn(); + const onChange = jest.fn(); + const Test = () => { + const [options, setOptions] = React.useState(['one', 'two']); + return ( + + + +
+ + + +
+ + +`; + +exports[`Select search and select 2`] = ` +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + box-sizing: border-box; + max-width: 100%; + min-width: 0; + min-height: 0; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + overflow: auto; + box-shadow: 0px 2px 4px rgba(0,0,0,0.20); +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + box-sizing: border-box; + max-width: 100%; + min-width: 0; + min-height: 0; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + box-sizing: border-box; + max-width: 100%; + min-width: 0; + min-height: 0; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding: 6px; +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + box-sizing: border-box; + max-width: 100%; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + min-width: 0; + min-height: 0; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + padding: 12px; +} + +.c12 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + box-sizing: border-box; + max-width: 100%; + min-width: 0; + min-height: 0; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: 0px; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} + +.c1 { + font-size: 18px; + line-height: 24px; + box-sizing: border-box; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + border-radius: 0px; + position: fixed; + z-index: 20; + outline: none; + background-color: #FFFFFF; + color: #444444; + opacity: 0; + -webkit-transform-origin: top left; + -ms-transform-origin: top left; + transform-origin: top left; + -webkit-animation: kPQHBD 0.1s forwards; + animation: kPQHBD 0.1s forwards; + -webkit-animation-delay: 0.01s; + animation-delay: 0.01s; +} + +.c8 { + display: inline-block; + box-sizing: border-box; + cursor: pointer; + font: inherit; + -webkit-text-decoration: none; + text-decoration: none; + margin: 0; + background: transparent; + overflow: visible; + text-transform: none; + color: inherit; + outline: none; + border: none; + padding: 0; + text-align: inherit; +} + +.c8:hover { + background-color: rgba(221,221,221,0.4); + color: #000000; +} + +.c8:focus { + outline: none; + box-shadow: 0 0 2px 2px #6FFFB0; +} + +.c8:focus > circle, +.c8:focus > ellipse, +.c8:focus > line, +.c8:focus > path, +.c8:focus > polygon, +.c8:focus > polyline, +.c8:focus > rect { + outline: none; + box-shadow: 0 0 2px 2px #6FFFB0; +} + +.c8:focus::-moz-focus-inner { + border: 0; +} + +.c11 { + margin: 0px; + font-size: 18px; + line-height: 24px; +} + +.c6 { + box-sizing: border-box; + font-size: inherit; + font-family: inherit; + border: none; + -webkit-appearance: none; + background: transparent; + color: inherit; + width: 100%; + padding: 11px; + font-weight: 600; + margin: 0; + font-size: 14px; + line-height: 20px; + outline: none; + box-shadow: 0 0 2px 2px #6FFFB0; + border: 1px solid rgba(0,0,0,0.33); + border-radius: 4px; +} + +.c6 > circle, +.c6 > ellipse, +.c6 > line, +.c6 > path, +.c6 > polygon, +.c6 > polyline, +.c6 > rect { + outline: none; + box-shadow: 0 0 2px 2px #6FFFB0; +} + +.c6::-moz-focus-inner { + border: 0; +} + +.c6::-webkit-input-placeholder { + color: #AAAAAA; +} + +.c6::-moz-placeholder { + color: #AAAAAA; +} + +.c6:-ms-input-placeholder { + color: #AAAAAA; +} + +.c6::-webkit-search-decoration { + -webkit-appearance: none; +} + +.c6::-moz-focus-inner { + border: none; + outline: none; +} + +.c6:-moz-placeholder, +.c6::-moz-placeholder { + opacity: 1; +} + +.c5 { + position: relative; + width: 100%; +} + +.c3 { + max-height: inherit; +} + +.c7 { + position: relative; + -webkit-scroll-behavior: smooth; + -moz-scroll-behavior: smooth; + -ms-scroll-behavior: smooth; + scroll-behavior: smooth; + overflow: auto; + outline: none; +} + +.c9 { + display: block; + width: 100%; +} + +@media only screen and (max-width:768px) { + +} + +@media only screen and (max-width:768px) { + .c4 { + padding: 3px; + } +} + +@media only screen and (max-width:768px) { + .c10 { + padding: 6px; + } +} + +@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none) { + .c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + } +} + +@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none) { + .c3 { + width: 100%; + } +} + +
+
+
+
+ +
+
+ +
+`; + +exports[`Select search and select 3`] = ` +"@media only screen and (max-width: 768px) { + .eA-DBEo { + margin-left: 6px; + margin-right: 6px; + } +}" +`; + +exports[`Select search and select 4`] = ` + +`; + +exports[`Select search and select 5`] = ` + +`; + exports[`Select select an option 1`] = ` .c8 { display: inline-block;