QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-20 00:24:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(explore): drag & drop column select component triggering onChange unnecessarily (#16073)

Browse Source 
* fix(explore): avoid sync until after first render

* fix example
This commit is contained in:
David Aaron Suddjian
2021-08-05 15:38:28 -07:00
committed by GitHub
parent 23072161e2
commit e6292a89bb
2 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx
View File

@@ -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) => {