diff --git a/packages/dataviews/src/components/dataform/index.tsx b/packages/dataviews/src/components/dataform/index.tsx index 202afc45cbf26c..1771d60aa5c1a5 100644 --- a/packages/dataviews/src/components/dataform/index.tsx +++ b/packages/dataviews/src/components/dataform/index.tsx @@ -10,6 +10,7 @@ import type { DataFormProps } from '../../types'; import { DataFormProvider } from '../dataform-context'; import { normalizeFields } from '../../normalize-fields'; import { DataFormLayout } from '../../dataforms-layouts/data-form-layout'; +import { MIXED_VALUE } from '../../constants'; /** * Loops through the list of data items and returns an object with the intersecting ( same ) key and values. @@ -26,6 +27,8 @@ function getIntersectingValues< Item extends object >( data: Item[] ): Item { } ); if ( intersects ) { intersectingValues[ key ] = firstRecord[ key ]; + } else { + intersectingValues[ key ] = MIXED_VALUE as Item[ keyof Item ]; } } return intersectingValues; diff --git a/packages/dataviews/src/constants.ts b/packages/dataviews/src/constants.ts index 5ae94c7eb4a135..fa5a9cd179de93 100644 --- a/packages/dataviews/src/constants.ts +++ b/packages/dataviews/src/constants.ts @@ -68,3 +68,6 @@ export const sortIcons = { export const LAYOUT_TABLE = 'table'; export const LAYOUT_GRID = 'grid'; export const LAYOUT_LIST = 'list'; + +// Dataform mixed value. +export const MIXED_VALUE = Symbol.for( 'DATAFORM_MIXED_VALUE' ); diff --git a/packages/dataviews/src/dataforms-layouts/panel/index.tsx b/packages/dataviews/src/dataforms-layouts/panel/index.tsx index f3d35edea28053..f7f70d8571c613 100644 --- a/packages/dataviews/src/dataforms-layouts/panel/index.tsx +++ b/packages/dataviews/src/dataforms-layouts/panel/index.tsx @@ -26,6 +26,7 @@ import type { import DataFormContext from '../../components/dataform-context'; import { DataFormLayout } from '../data-form-layout'; import { isCombinedField } from '../is-combined-field'; +import { MIXED_VALUE } from '../../constants'; function DropdownHeader( { title, @@ -114,8 +115,7 @@ function PanelDropdown< Item extends object >( { ); const fieldValue = fieldDefinition.getValue( { item: data } ); - const showMixedValue = - isBulkEditing && ( fieldValue === undefined || fieldValue === '' ); + const showMixedValue = isBulkEditing && fieldValue === MIXED_VALUE; return ( = { id: 'title', label: __( 'Title' ), placeholder: __( 'No title' ), - getValue: ( { item } ) => getItemTitle( item ), + getValue: ( { item } ) => { + if ( typeof item.title === 'symbol' ) { + return item.title; + } + return getItemTitle( item ); + }, render: TitleView, enableHiding: false, };