From abd14581926664ba92ef4d1fce9fb6120eab494e Mon Sep 17 00:00:00 2001 From: Matthew Runyon Date: Tue, 7 Mar 2023 17:30:17 -0600 Subject: [PATCH 1/4] Fix issues from ticket test failure --- .../VisibilityOrderingBuilder.tsx | 6 +- .../VisibilityOrderingGroup.tsx | 118 ++++++++++++------ 2 files changed, 82 insertions(+), 42 deletions(-) diff --git a/packages/iris-grid/src/sidebar/visibility-ordering-builder/VisibilityOrderingBuilder.tsx b/packages/iris-grid/src/sidebar/visibility-ordering-builder/VisibilityOrderingBuilder.tsx index 4a96f95751..3bd22c9b7c 100644 --- a/packages/iris-grid/src/sidebar/visibility-ordering-builder/VisibilityOrderingBuilder.tsx +++ b/packages/iris-grid/src/sidebar/visibility-ordering-builder/VisibilityOrderingBuilder.tsx @@ -151,8 +151,10 @@ class VisibilityOrderingBuilder extends Component< searchColumns(searchFilter: string): void { const flattenedItems = flattenTree(this.getTreeItems()); - const itemsMatch = flattenedItems.filter(({ id }) => - id.toLowerCase().includes(searchFilter.toLowerCase()) + const itemsMatch = flattenedItems.filter( + ({ id, data }) => + !(data.group?.isNew ?? false) && + id.toLowerCase().includes(searchFilter.toLowerCase()) ); const columnsMatch = itemsMatch.map(({ id }) => id); diff --git a/packages/iris-grid/src/sidebar/visibility-ordering-builder/VisibilityOrderingGroup.tsx b/packages/iris-grid/src/sidebar/visibility-ordering-builder/VisibilityOrderingGroup.tsx index be05ad60bb..51a116d7e7 100644 --- a/packages/iris-grid/src/sidebar/visibility-ordering-builder/VisibilityOrderingGroup.tsx +++ b/packages/iris-grid/src/sidebar/visibility-ordering-builder/VisibilityOrderingGroup.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useRef, useState, useCallback } from 'react'; import classNames from 'classnames'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Button, ThemeExport } from '@deephaven/components'; @@ -29,11 +29,15 @@ export default function VisibilityOrderingGroup( const groupRef = useRef(group); const nameInputRef = useRef(null); const colorInputRef = useRef(null); + const [isColorInputOpen, setIsColorInputOpen] = useState(false); const [name, setName] = useState(isNew ? '' : group.name); const [isEditing, setIsEditing] = useState(isNew); - const [hasTyped, setHasTyped] = useState(false); + const [shouldValidate, setShouldValidate] = useState(false); const nameValidationError = name !== group.name ? validateName(name) : ''; - const isValid = (isNew && !hasTyped) || nameValidationError === ''; + const isValid = (isNew && !shouldValidate) || nameValidationError === ''; + const colorInputBlurHandler = useCallback(() => { + setIsColorInputOpen(false); + }, []); useEffect( function focusEditInput() { @@ -59,6 +63,35 @@ export default function VisibilityOrderingGroup( [onDelete] ); + useEffect( + function openColorInput() { + if (isColorInputOpen) { + colorInputRef.current?.click(); + // Mostly for testing. Chrome seems to not give the hidden input focus + // Really would only affect screen readers + colorInputRef.current?.focus(); + + /** + * Adding this event handler is for Firefox on Mac + * There seems to be buggy behavior when multiple color inputs are on the same page + * Clicking between the inputs without closing the previous causes a bad state + * The user gets to a point where they can't open most of the pickers + * https://bugzilla.mozilla.org/show_bug.cgi?id=1618418 + * https://bugzilla.mozilla.org/show_bug.cgi?id=975468 + * Instead, we remove the color input when any focus is returned to the window + * This causes Firefox on Mac to mostly operate correctly + * Firefox seems to ignore the first click back into the window and emit no event + * So opening a color picker when another is open requires 2 clicks in Firefox + */ + window.addEventListener('focus', colorInputBlurHandler, true); + } + + return () => + window.removeEventListener('focus', colorInputBlurHandler, true); + }, + [isColorInputOpen, colorInputBlurHandler] + ); + const handleConfirm = () => { if (isValid) { onNameChange(group, name); @@ -76,7 +109,7 @@ export default function VisibilityOrderingGroup( }; const handleEditKeyDown = (e: React.KeyboardEvent): void => { - setHasTyped(true); + setShouldValidate(true); if (e.key === 'Enter') { e.stopPropagation(); handleConfirm(); @@ -104,6 +137,7 @@ export default function VisibilityOrderingGroup( placeholder="Group Name" onChange={e => setName(e.target.value)} onKeyDown={handleEditKeyDown} + onBlur={() => setShouldValidate(true)} />