correcciones componente select

janis-commerce · Jan 5, 2024 · de5d318 · de5d318
1 parent b6e4ecf
commit de5d318
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 23 deletions.
diff --git a/src/components/Select/index.test.tsx b/src/components/Select/index.test.tsx
@@ -8,6 +8,7 @@ import Select from './';
 jest.spyOn(React, 'useEffect').mockImplementation((f) => f());
 
 const useStateSpy = jest.spyOn(React, 'useState');
+const inputRefSpy = jest.spyOn(React, 'useRef');
 const setInputValueSpy = jest.fn();
 const setSelectedOptions = jest.fn();
 const setFilteredOptionsSpy = jest.fn();
@@ -28,6 +29,8 @@ const validProps = {
 	onFocusSpy: jest.fn(),
 };
 
+const measureMock = jest.fn((callback) => callback(0, 0, 100, 50, 0, 0));
+
 const validMeasures = {width: 0, pageY: 0, pageX: 0};
 
 describe('Select component', () => {
@@ -44,13 +47,17 @@ describe('Select component', () => {
 				.mockReturnValueOnce([validOptions, setFilteredOptionsSpy])
 				.mockReturnValueOnce([false, setIsShowedDropdownSpy])
 				.mockReturnValueOnce([validMeasures, setDropdownMeasures]);
+			inputRefSpy.mockReturnValueOnce({current: {measure: measureMock}});
 			const {root} = create(
 				<Select options={validProps.options} label={validProps.label} isDisabled={true} />
 			);
 			const ChevronComponent = root.findByType(Icon);
 			ChevronComponent.props.onPress();
 
+			jest.spyOn(React, 'useEffect').mockImplementation((f) => f());
+
 			expect(setIsShowedDropdownSpy).not.toBeCalled();
+			expect(setDropdownMeasures).toBeCalled();
 		});
 	});
 
@@ -104,9 +111,7 @@ describe('Select component', () => {
 				.mockReturnValueOnce([true, setIsShowedDropdownSpy])
 				.mockReturnValueOnce([validMeasures, setDropdownMeasures]);
 
-			const {root} = create(
-				<Select options={validProps.options} label={validProps.label} isSearchable />
-			);
+			const {root} = create(<Select options={validProps.options} label={validProps.label} />);
 			const InputComponent = root.findByType(TextInput);
 			InputComponent.props.onFocus();
 			InputComponent.props.onChangeText(5);
@@ -123,9 +128,7 @@ describe('Select component', () => {
 				.mockReturnValueOnce([true, setIsShowedDropdownSpy])
 				.mockReturnValueOnce([validMeasures, setDropdownMeasures]);
 
-			const {root} = create(
-				<Select options={validProps.options} label={validProps.label} isSearchable />
-			);
+			const {root} = create(<Select options={validProps.options} label={validProps.label} />);
 			const InputComponent = root.findByType(TextInput);
 			InputComponent.props.onFocus();
 			InputComponent.props.onChangeText('');
@@ -146,7 +149,6 @@ describe('Select component', () => {
 				<Select
 					options={validProps.options}
 					label={validProps.label}
-					isSearchable
 					onFocus={validProps.onFocusSpy}
 				/>
 			);

diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx
@@ -48,7 +48,6 @@ interface SelectProps {
 	optionStyles?: {};
 	placeholder?: string;
 	inputProps?: TextInput;
-	isSearchable?: boolean;
 	isMulti?: boolean;
 	isDisabled?: boolean;
 	noOptionsMessage?: string;
@@ -68,7 +67,6 @@ const Select: FC<SelectProps> = ({
 	placeholder = '',
 	optionStyles = {},
 	inputProps = {},
-	isSearchable = false,
 	isMulti = false,
 	isDisabled = false,
 	noOptionsMessage = 'no options',
@@ -114,11 +112,9 @@ const Select: FC<SelectProps> = ({
 	};
 
 	const handleOnFocus = () => {
-		if (!isSearchable || !isShowedOptions || isMulti || variantOptions === VariantOptions.Modal) {
-			Keyboard.dismiss();
-		}
-		onFocus();
+		Keyboard.dismiss();
 		setIsShowedOptions(true);
+		onFocus();
 	};
 
 	const setSingleOption = (option: Option) => {
@@ -175,6 +171,14 @@ const Select: FC<SelectProps> = ({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [hasDefaultValue, value]);
 
+	useEffect(() => {
+		if (inputRef.current) {
+			inputRef.current.measure((x, y, width, height, pageX, pageY) =>
+				setDropdownMeasures({width, pageX, pageY: pageY - 15})
+			);
+		}
+	}, [isShowedOptions]);
+
 	const styles = StyleSheet.create({
 		wrapper: {
 			width: '100%',
@@ -226,14 +230,6 @@ const Select: FC<SelectProps> = ({
 		},
 	});
 
-	useEffect(() => {
-		if (inputRef.current) {
-			inputRef.current.measure((x, y, width, height, pageX, pageY) =>
-				setDropdownMeasures({width, pageX, pageY: pageY - 15})
-			);
-		}
-	}, [isShowedOptions]);
-
 	return (
 		<View style={styles.wrapper} {...props}>
 			<View style={styles.wrapperInput}>
@@ -259,8 +255,8 @@ const Select: FC<SelectProps> = ({
 					style={styles.input}
 					value={inputValue}
 					placeholder={isMoveLabel && placeholder}
-					showSoftInputOnFocus={!isMulti && isSearchable}
-					caretHidden={!isSearchable}
+					showSoftInputOnFocus={false}
+					caretHidden={true}
 					keyboardType={keyboardType}
 					editable={!isDisabled}
 					onFocus={handleOnFocus}