diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index b85ab247e81a5e..746dcbf125544b 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -190,6 +190,12 @@ > * { flex-grow: 1; } + + &.dataviews-view-table__primary-field { + a { + flex-grow: 0; + } + } } } .dataviews-view-table-header-button { @@ -236,6 +242,7 @@ white-space: nowrap; display: block; width: 100%; + overflow: hidden; a { text-decoration: none; @@ -244,10 +251,10 @@ white-space: nowrap; overflow: hidden; display: block; - width: 100%; + flex-grow: 0; &:hover { - color: $gray-900; + color: var(--wp-admin-theme-color); } @include link-reset(); } diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index 5ef9d612523a00..7e2e4796da2747 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -237,7 +237,6 @@ function TableRow( { data, } ) { const hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item ); - const isSelected = selection.includes( id ); const [ isHovered, setIsHovered ] = useState( false ); @@ -250,22 +249,28 @@ function TableRow( { setIsHovered( false ); }; + // Will be set to true if `onTouchStart` fires. This happens before + // `onClick` and can be used to exclude touchscreen devices from certain + // behaviours. + const isTouchDevice = useRef( false ); + return ( { - if ( event.ctrlKey || event.metaKey ) { - event.stopPropagation(); - event.preventDefault(); - if ( ! hasPossibleBulkAction ) { - return; - } + onTouchStart={ () => { + isTouchDevice.current = true; + } } + onClick={ () => { + if ( + ! isTouchDevice.current && + document.getSelection().type !== 'Range' + ) { if ( ! isSelected ) { onSelectionChange( data.filter( ( _item ) => { @@ -337,9 +342,20 @@ function TableRow( { ) ) } { !! actions?.length && ( - + // Disable reason: we are not making the element interactive, + // but preventing any click events from bubbling up to the + // table row. This allows us to add a click handler to the row + // itself (to toggle row selection) without erroneously + // intercepting click events from ItemActions. + + /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */ + e.stopPropagation() } + > + /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */ ) } );