- fix <Select/> item onClick cached issue

Author: Edward Xiao

lib/components/Select.js

@@ -257,6 +257,7 @@ var component = function component(_ref) {
       setInternalValue = _useState8[1];
 
   var prevInternalValue = (0, _const.usePrevious)(internalValue);
+  var prevOptionList = (0, _const.usePrevious)(optionList);
 
   var _useState9 = useState(false),
       _useState10 = _slicedToArray(_useState9, 2),
@@ -579,6 +580,11 @@ var component = function component(_ref) {
   useEffect(function () {
     setInternalValue(String(value));
   }, [value]);
+  useEffect(function () {
+    if (prevOptionList && prevOptionList !== optionList) {
+      setInternalValue(String(optionList[0].id));
+    }
+  }, [optionList]);
   useEffect(function () {
     if (typeof prevInternalValue !== 'undefined' && prevInternalValue !== internalValue) {
       check();
@@ -712,7 +718,7 @@ var Option = memo(function (_ref2) {
       onMouseOut = _ref2$onMouseOut === void 0 ? function () {} : _ref2$onMouseOut;
   var handleOnClick = useCallback(function (e) {
     onClick(item, e);
-  }, []);
+  }, [item]);
   var handleOnMouseOver = useCallback(function () {
     onMouseOver(index);
   }, []);

lib/react-inputs-validation.js

@@ -1,6 +1,6 @@
 {
     "name": "react-inputs-validation",
-    "version": "4.1.4",
+    "version": "4.1.6",
     "description": "React form input validation components",
     "main": "index.js",
     "repository": {

lib/react-inputs-validation.js.map

@@ -203,7 +203,7 @@ describe('Select component', () => {
   });
 
   it('[asyncObj]: Should show error', () => {
-    const wrapper = mount(<Select onBlur={() => {}} asyncMsgObj={{}} />);
+    const wrapper = mount(<Select onBlur={() => {}} optionList={OPTION_LIST} asyncMsgObj={{}} />);
     const $wrapper = wrapper.find(WRAPPER);
     $wrapper.simulate('focus');
     $wrapper.simulate('blur');
@@ -226,7 +226,7 @@ describe('Select component', () => {
   });
 
   it('[asyncObj]: Should show success', () => {
-    const wrapper = mount(<Select onBlur={() => {}} asyncMsgObj={{}} />);
+    const wrapper = mount(<Select onBlur={() => {}} optionList={OPTION_LIST} asyncMsgObj={{}} />);
     const $wrapper = wrapper.find(WRAPPER);
     $wrapper.simulate('focus');
     $wrapper.simulate('blur');

lib/react-inputs-validation.min.js

@@ -163,6 +163,7 @@ const component: React.FC<Props> = ({
   const [successMsg, setSuccessMsg] = useState('');
   const [internalValue, setInternalValue] = useState(String(value));
   const prevInternalValue = usePrevious(internalValue);
+  const prevOptionList = usePrevious(optionList);
   const [show, setShow] = useState(false);
   const [isTyping, setIsTyping] = useState(false);
   const initKeycodeList: number[] = [];
@@ -439,6 +440,11 @@ const component: React.FC<Props> = ({
   useEffect(() => {
     setInternalValue(String(value));
   }, [value]);
+  useEffect(() => {
+    if (prevOptionList && prevOptionList !== optionList) {
+      setInternalValue(String(optionList[0].id));
+    }
+  }, [optionList]);
   useEffect(() => {
     if (typeof prevInternalValue !== 'undefined' && prevInternalValue !== internalValue) {
       check();
@@ -557,7 +563,7 @@ export const Option: React.FC<OptionProps> = memo(
   ({ index = -1, id = '', className = '', item = { id: '', name: '' }, customStyleOptionListItem = {}, onClick = () => {}, onMouseOver = () => {}, onMouseMove = () => {}, onMouseOut = () => {} }) => {
     const handleOnClick = useCallback((e: React.MouseEvent<HTMLElement>) => {
       onClick(item, e);
-    }, []);
+    }, [item]);
     const handleOnMouseOver = useCallback(() => {
       onMouseOver(index);
     }, []);