diff --git a/packages/dataviews/src/dataforms-layouts/panel/index.tsx b/packages/dataviews/src/dataforms-layouts/panel/index.tsx index 3dc52db0adc879..151aefed12c24b 100644 --- a/packages/dataviews/src/dataforms-layouts/panel/index.tsx +++ b/packages/dataviews/src/dataforms-layouts/panel/index.tsx @@ -17,7 +17,7 @@ import { closeSmall } from '@wordpress/icons'; * Internal dependencies */ import { normalizeFields } from '../../normalize-fields'; -import type { DataFormProps, NormalizedField } from '../../types'; +import type { DataFormProps, NormalizedField, Field } from '../../types'; interface FormFieldProps< Item > { data: Item; @@ -142,7 +142,11 @@ export default function FormPanel< Item >( { const visibleFields = useMemo( () => normalizeFields( - fields.filter( ( { id } ) => !! form.fields?.includes( id ) ) + ( form.fields ?? [] ) + .map( ( fieldId ) => + fields.find( ( { id } ) => id === fieldId ) + ) + .filter( ( field ): field is Field< Item > => !! field ) ), [ fields, form.fields ] ); diff --git a/packages/dataviews/src/dataforms-layouts/regular/index.tsx b/packages/dataviews/src/dataforms-layouts/regular/index.tsx index 1164a61196a699..0ec427ae010032 100644 --- a/packages/dataviews/src/dataforms-layouts/regular/index.tsx +++ b/packages/dataviews/src/dataforms-layouts/regular/index.tsx @@ -8,7 +8,7 @@ import { useMemo } from '@wordpress/element'; * Internal dependencies */ import { normalizeFields } from '../../normalize-fields'; -import type { DataFormProps } from '../../types'; +import type { DataFormProps, Field } from '../../types'; export default function FormRegular< Item >( { data, @@ -19,7 +19,11 @@ export default function FormRegular< Item >( { const visibleFields = useMemo( () => normalizeFields( - fields.filter( ( { id } ) => !! form.fields?.includes( id ) ) + ( form.fields ?? [] ) + .map( ( fieldId ) => + fields.find( ( { id } ) => id === fieldId ) + ) + .filter( ( field ): field is Field< Item > => !! field ) ), [ fields, form.fields ] );