diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.js
index 2f001050cc1e51..0ebaa373c3ef9c 100644
--- a/packages/dataviews/src/add-filter.js
+++ b/packages/dataviews/src/add-filter.js
@@ -120,7 +120,7 @@ export default function AddFilter( { filters, view, onChangeView } ) {
name={ `add-filter-${ filter.field }` }
value={ element.value }
checked={ isActive }
- onClick={ () => {
+ onChange={ ( e ) => {
onChangeView( {
...view,
page: 1,
@@ -132,7 +132,9 @@ export default function AddFilter( { filters, view, onChangeView } ) {
activeOperator,
value: isActive
? undefined
- : element.value,
+ : e
+ .target
+ .value,
},
],
} );
diff --git a/packages/dataviews/src/view-actions.js b/packages/dataviews/src/view-actions.js
index 0e1aeab6d70520..65c4dff8c36f71 100644
--- a/packages/dataviews/src/view-actions.js
+++ b/packages/dataviews/src/view-actions.js
@@ -13,12 +13,12 @@ import { memo } from '@wordpress/element';
*/
import { unlock } from './lock-unlock';
import { VIEW_LAYOUTS, LAYOUT_TABLE, SORTING_DIRECTIONS } from './constants';
-import { DropdownMenuRadioItemCustom } from './dropdown-menu-helper';
const {
DropdownMenuV2: DropdownMenu,
DropdownMenuGroupV2: DropdownMenuGroup,
DropdownMenuItemV2: DropdownMenuItem,
+ DropdownMenuRadioItemV2: DropdownMenuRadioItem,
DropdownMenuCheckboxItemV2: DropdownMenuCheckboxItem,
DropdownMenuItemLabelV2: DropdownMenuItemLabel,
} = unlock( componentsPrivateApis );
@@ -50,7 +50,7 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
>
{ _availableViews.map( ( availableView ) => {
return (
-
{ availableView.label }
-
+
);
} ) }
@@ -90,21 +90,23 @@ function PageSizeMenu( { view, onChangeView } ) {
>
{ PAGE_SIZE_VALUES.map( ( size ) => {
return (
- {
+ onChange={ () => {
onChangeView( {
...view,
- perPage: e.target.value,
+ // `e.target.value` holds the same value as `size` but as a string,
+ // so we use `size` directly to avoid parsing to int.
+ perPage: size,
page: 1,
} );
} }
>
{ size }
-
+
);
} ) }
@@ -210,18 +212,25 @@ function SortMenu( { fields, view, onChangeView } ) {
sortedDirection === direction &&
field.id === currentSortedField.id;
+ const value = `${ field.id }-${ direction }`;
+
return (
- {
+ onChange={ () => {
onChangeView( {
...view,
sort: {
field: field.id,
- direction: e.target.value,
+ direction,
},
} );
} }
@@ -229,7 +238,7 @@ function SortMenu( { fields, view, onChangeView } ) {
{ info.label }
-
+
);
}
) }
diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js
index 6ca851c5d5690d..0a7e29cd1068c1 100644
--- a/packages/dataviews/src/view-table.js
+++ b/packages/dataviews/src/view-table.js
@@ -23,6 +23,7 @@ const {
DropdownMenuV2: DropdownMenu,
DropdownMenuGroupV2: DropdownMenuGroup,
DropdownMenuItemV2: DropdownMenuItem,
+ DropdownMenuRadioItemV2: DropdownMenuRadioItem,
DropdownMenuSeparatorV2: DropdownMenuSeparator,
DropdownMenuItemLabelV2: DropdownMenuItemLabel,
} = unlock( componentsPrivateApis );
@@ -93,18 +94,26 @@ function HeaderMenu( { field, view, onChangeView } ) {
const isChecked =
isSorted &&
view.sort.direction === direction;
+
+ const value = `${ field.id }-${ direction }`;
+
return (
- {
+ onChange={ () => {
onChangeView( {
...view,
sort: {
field: field.id,
- direction: e.target.value,
+ direction,
},
} );
} }
@@ -112,7 +121,7 @@ function HeaderMenu( { field, view, onChangeView } ) {
{ info.label }
-
+
);
}
) }
@@ -220,7 +229,7 @@ function HeaderMenu( { field, view, onChangeView } ) {
operator,
{ label, key },
] ) => (
-
{ label }
-
+
)
) }