SelectV2 component error when typing on component

[StephenLHChan]

Hi,

I am trying to upgrade my Select component to SelectV2 component.

I am facing an issue that:

1. when I click on "Search..." and start typing, it is working fine
2. when I only click to see all options and then start typing without click on "Search...", the following error is shown:

Error: Failed to execute 'querySelector' on 'Element': '#51a9b590-7d6a-402c-84c6-2d435127657a' is not a valid selector.
    at onKeyDown (http://localhost:3000/ui/main.js:70380:18)
    at Select3._this.onKeyDown (http://localhost:3000/ui/main.js:68638:11)
    at HTMLUnknownElement.callCallback2 (http://localhost:3000/ui/main.js:5639:24)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/ui/main.js:5664:26)
    at invokeGuardedCallback (http://localhost:3000/ui/main.js:5698:41)
    at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/ui/main.js:5701:35)
    at executeDispatch (http://localhost:3000/ui/main.js:8483:13)
    at processDispatchQueueItemsInOrder (http://localhost:3000/ui/main.js:8503:17)
    at processDispatchQueue (http://localhost:3000/ui/main.js:8512:15)
    at dispatchEventsForPlugins (http://localhost:3000/ui/main.js:8520:13)

dependencies:

"@dynatrace/strato-components-preview": "0.111.3"

[sinisa_zubic]

Hi @StephenLHChan 

Unfortunately I can't reproduce the behavior with "@dynatrace/strato-components-preview": "0.111.3".

Maybe this issue only happens when certain props are being used? I have tried various combinations, but could not reproduce the behavior. Here my latest reproducer snippet

  const result = useDqlQuery({
    body: {
      query: `fetch dt.entity.process_group
        | dedup entity.name
        | fields name = entity.name, id`,
      requestTimeoutMilliseconds: 30000
    }
  });
  const [singleValue, setSingleValue] = useState<string | null>(null);


  return (
    <Flex flexDirection="column" padding={32}>
      <FormField label="Select a country">
        <SelectV2
          value={singleValue}
          onChange={setSingleValue}
          
        >
          <SelectV2.Trigger width="550px" />
          <SelectV2.Content >
            <SelectV2.EmptyState>
              No matching countries found.
            </SelectV2.EmptyState>
            <SelectV2.Filter />
            {
              result.data && result.data.records.map((record) => (
                <SelectV2.Option key={record!.id} value={record!.id}>{record!.name}</SelectV2.Option>
              ))
            }
          </SelectV2.Content>
        </SelectV2>
      </FormField>

Can you maybe share you snippet how you use the SelectV2 component or let us know which properties are being used?

Best,
Sini

[StephenLHChan]

Hi @sinisa_zubic ,

Thanks for the reply. Here is the code snippet of the SelectV2 part.

<SelectV2
	value={selectedIds}
	clearable
	multiple={multipleEntitySelection}
	disabled={
		!env ||
		!type ||
		isLoading ||
		entitySuggestions.length === 0 ||
		disabled
	}
	onChange={(val) => { some OnChange Action
	}}
>
	<SelectV2.Trigger
		placeholder={
			isLoading ? 'Loading...' : entitySelectionPlaceholder
		}
		width="full"
	>
		<SelectV2.DisplayValue>
			<Flex>
				{selectedIds !== null && selectedIds.length > 0 ? (
					typeof selectedIds === 'string' ? (
						<Text>Selected 1 {type}</Text>
					) : (
						<Text>
							Selected {selectedIds.length} {type}
						</Text>
					)
				) : (
					<Text>{entitySelectionPlaceholder}</Text>
				)}
			</Flex>
		</SelectV2.DisplayValue>
	</SelectV2.Trigger>
	<SelectV2.Content>
		<SelectV2.Filter />
		{entitySuggestions
			?.sort((a, b) => {
				if (selectedIds?.includes(a.entityId)) {
					return -1;
				}
				if (selectedIds?.includes(b.entityId)) {
					return 1;
				}
				if (a.displayName < b.displayName) {
					return -1;
				} else {
					return 1;
				}
			})
			.map(({ entityId, displayName }) => {
				return (
					<SelectV2.Option
						key={entityId as string}
						value={entityId as string}
					>
						{displayName}
					</SelectV2.Option>
				);
			})}
	</SelectV2.Content>
</SelectV2>

[sinisa_zubic · Accepted solution]

I am still not able to reproduce the issue but currently the SelectV2 component does not auto focus on the search. So when clicking on the Component and start typing, the filtering won't start. It is intended behavior that you have to do two clicks. You can try it also out here in the reference: https://developer.dynatrace.com/reference/design-system/preview/forms/SelectV2/#filter-options

I have also further checked with engineering and we will add the same behavior to SelectV2, so it won't be needed anymore that you make two clicks to start searching. But I can't give you any ETA on that.

I don't know if you have some other handlers in place which could trigger this error. Maybe you can create a reproducer (app) and share it with us?