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 <[email protected]> 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) => {
