[superset] 01/02: fix(explore): avoid sync until after first render

[su...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

suddjian pushed a commit to branch fix/dnd-column-select-sync
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 9f483bc12f6179bda2397c34baaec774227797bb
Author: David Aaron Suddjian <aa...@gmail.com>
AuthorDate: Wed Aug 4 12:58:22 2021 -0700

    fix(explore): avoid sync until after first render
---
 .../controls/DndColumnSelectControl/DndColumnSelect.tsx    | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx
index 839784f..32097b2 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { tn } from '@superset-ui/core';
 import { ColumnMeta } from '@superset-ui/chart-controls';
 import { isEmpty } from 'lodash';
@@ -27,6 +27,7 @@ import { OptionSelector } from 'src/explore/components/controls/DndColumnSelectC
 import { DatasourcePanelDndItem } from 'src/explore/components/DatasourcePanel/types';
 import { DndItemType } from 'src/explore/components/DndItemType';
 import { StyledColumnOption } from 'src/explore/components/optionRenderers';
+import { useComponentDidUpdate } from 'src/common/hooks/useComponentDidUpdate';
 
 export const DndColumnSelect = (props: LabelProps) => {
   const {
@@ -45,7 +46,7 @@ export const DndColumnSelect = (props: LabelProps) => {
   );
 
   // synchronize values in case of dataset changes
-  useEffect(() => {
+  const handleOptionsChange = useCallback(() => {
     const optionSelectorValues = optionSelector.getValues();
     if (typeof value !== typeof optionSelectorValues) {
       onChange(optionSelectorValues);
@@ -65,8 +66,13 @@ export const DndColumnSelect = (props: LabelProps) => {
     ) {
       onChange(optionSelectorValues);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(value), JSON.stringify(optionSelector.getValues())]);
+    // when options change, that means that the dataset has changed
+    // so we have to check if values are still applicable.
+  }, [options, value, optionSelector]);
+
+  // useComponentDidUpdate to avoid running this for the first render, to avoid
+  // calling onChange when the initial value is not valid for the dataset
+  useComponentDidUpdate(handleOptionsChange);
 
   const onDrop = useCallback(
     (item: DatasourcePanelDndItem) => {