- more test and change <Select/> value to internalValue.

Author: Edward Xiao

lib/components/index.js

@@ -1,6 +1,6 @@
 {
   "name": "react-inputs-validation",
-  "version": "4.1.9",
+  "version": "4.2.0",
   "description": "React form input validation components",
   "main": "index.js",
   "repository": {
@@ -29,7 +29,7 @@
   "scripts": {
     "test": "NODE_ENV=test jest",
     "test:coverage": "npm run tslint && npm run jslint && npm test -- --coverage",
-    "test_single": "node_modules/.bin/jest Checkbox.js --coverage",
+    "test_single": "node_modules/.bin/jest Select.js --coverage",
     "prepublish": "npm run test:coverage",
     "jslint": "eslint ./src",
     "tslint": "tslint -c tslint.json 'src/**/*.{ts,tsx}'",
@@ -46,7 +46,7 @@
     "server_prod": "node_modules/.bin/webpack-dev-server --config ./webpack/production.config.js",
     "clean": "rimraf dist lib",
     "compile_webpack": "npm run clean && npm run build_umd_global && npm run build_umd_global_min && npm run build_umd_local",
-    "compile": "npm run clean && npm run compile_webpack"
+    "compile": "npm run clean && npm run compile_webpack && rm ./lib/components/*.css"
   },
   "peerDependencies": {
     "react": "^16.8.6",

lib/components/react-inputs-validation.css

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo, useState } from 'react';
 import { expect as chaiExpect } from 'chai';
 import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
@@ -239,6 +239,41 @@ describe('Select component', () => {
     ).toEqual('success');
   });
 
+  const LIST1 = [{ id: 'us', name: 'US' }, { id: 'ca', name: 'CA' }];
+  const LIST2 = [{ id: 'uk', name: 'UK' }, { id: 'fr', name: 'France' }];
+  const MyComponent = memo(() => {
+    const stateOptionList = useState(LIST1);
+    const stateCurId = useState(LIST1[0].id);
+    return (
+      <div>
+        <Select
+          value={stateCurId[0]}
+          onBlur={() => {}}
+          optionList={stateOptionList[0]}
+          onChange={res => {
+            stateCurId[1](res.id);
+          }}
+        />
+        <div
+          id="changeList"
+          onClick={() => {
+            stateOptionList[1](LIST2);
+          }}
+        >
+          change list
+        </div>
+        <div id="stateCurId">{stateCurId[0]}</div>
+      </div>
+    );
+  });
+
+  it('[update optionList]: Should change ', () => {
+    const wrapper = mount(<MyComponent />);
+    const $input = wrapper.find('input');
+    wrapper.find('#changeList').simulate('click');
+    expect($input.at(0).instance().value).toEqual(LIST2[0].id);
+  });
+
   it('[console.error REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE]: Should console.error REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE', () => {
     const restoreConsole = mockConsole();
     const wrapper = mount(<Select optionList={OPTION_LIST} onBlur={() => {}} validationOption={{ locale: 'foobar' }} />);

lib/react-inputs-validation.js

@@ -535,7 +535,7 @@ const component: React.FC<Props> = ({
     >
       <div ref={$wrapper} className={wrapperClass} style={customStyleWrapper}>
         <div className={containerClass} style={customStyleContainer}>
-          <input type="hidden" value={value} className={inputClass} onChange={() => {}} {...attributesInput} />
+          <input type="hidden" value={internalValue} className={inputClass} onChange={() => {}} {...attributesInput} />
           <div className={selectClass} style={customStyleSelect}>
             {selectorHtml}
           </div>
@@ -561,9 +561,12 @@ interface OptionProps {
 }
 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 handleOnClick = useCallback(
+      (e: React.MouseEvent<HTMLElement>) => {
+        onClick(item, e);
+      },
+      [item],
+    );
     const handleOnMouseOver = useCallback(() => {
       onMouseOver(index);
     }, []);