fix: control panel not working (#462)

Author: zombieJ

examples/panel.tsx

@@ -57,14 +57,33 @@ const addressOptions = [
 ];
 
 export default () => {
+  const [value, setValue] = React.useState([]);
+
   return (
     <>
       <h1>Panel</h1>
+      <button
+        onClick={() => {
+          setValue(['bj', 'haidian']);
+        }}
+      >
+        Set Value
+      </button>
+      <Cascader.Panel
+        value={value}
+        options={addressOptions}
+        onChange={nextValue => {
+          console.log('Change:', nextValue);
+          setValue(nextValue);
+        }}
+      />
+
       <Cascader.Panel
         checkable
+        value={value}
         options={addressOptions}
-        onChange={value => {
-          console.log('Change:', value);
+        onChange={nextValue => {
+          console.log('Change:', nextValue);
         }}
       />
 

src/OptionList/useActive.ts

@@ -10,19 +10,20 @@ export default (
 ): [React.Key[], (activeValueCells: React.Key[]) => void] => {
   const { values } = React.useContext(CascaderContext);
 
+  const firstValueCells = values[0];
+
   // Record current dropdown active options
   // This also control the open status
   const [activeValueCells, setActiveValueCells] = React.useState<React.Key[]>([]);
 
   React.useEffect(
     () => {
       if (open && !multiple) {
-        const firstValueCells = values[0];
         setActiveValueCells(firstValueCells || []);
       }
     },
     /* eslint-disable react-hooks/exhaustive-deps */
-    [open],
+    [open, firstValueCells],
     /* eslint-enable react-hooks/exhaustive-deps */
   );
 

tests/Panel.spec.tsx

@@ -92,4 +92,11 @@ describe('Cascader.Panel', () => {
 
     expect(container.querySelector('.rc-cascader-panel-empty').textContent).toEqual('Hello World');
   });
+
+  it('control', () => {
+    const { container } = render(<Cascader.Panel options={options} value={['bamboo', 'little']} />);
+
+    const checkedLi = container.querySelector('[aria-checked="true"]');
+    expect(checkedLi.textContent).toEqual('Little');
+  });
 });