Autosuggest dropdown is not clickable

[yer421]

Browser

No response

Package version

3.0.7

React version

18.2.0

Description

I have the Autosuggest dropdown within a container. When the dropdown is opened, it is not clickable. The options are only selected with the down arrow + enter.

Source code

return (
    <Container header={<Header variant="h2">Association</Header>}>
      <SpaceBetween direction="vertical" size="l">
        <NotificationBar error={errorMessage} clearNotifications={errorMessage === undefined} />
        <ColumnLayout columns={4}>
          <FormField label="Association ID" constraintText="10 character limit. No spaces">
            <Autosuggest
              enteredTextLabel={(value) => `Use: "${value}"`}
              options={associationCodeArray}
              onChange={({ detail }) => {
                setAssociationCode(detail.value);
              }}
              value={codeValue}
            ></Autosuggest>
          </FormField>
          <InputFormField
            label="Association Name"
            value={formData.associationName}
            editable={_editable}
            transformOptions={{ allCaps: true }}
            onChange={(_e, _error, transformValue) =>
              onInputChange('associationName', transformValue!)
            }
            validation={{ max: 50, required: true }}
          />
          <InputFormField
            label="Termination Date"
            constraintText="mm/dd/yyyy"
            value={formData.terminationDate.toString()}
            editable={_editable}
            onChange={({ detail }) => {
              onInputChange('terminationDate', detail.value);
            }}
          />
          <Box padding="xl">
            {isBusy ? (
              <Spinner />
            ) : (
              <BusyButton variant="primary" onClick={() => onAdd()}>
                Add
              </BusyButton>
            )}
          </Box>
        </ColumnLayout>

        <TemporaryEditableDataTable
          data={props.data}
          modelName={'Association'}
          onDelete={(d) => onDelete(d)}
          converters={converterMap}
        />
      </SpaceBetween>
    </Container>
  );

Reproduction

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[johannes-weber]

Hi @yer421, could you share a reproducible example and/or a screenshot/video of the issue.
The code example code you've shared contains custom components and variables which are not referenced. Having a reproducible example makes investigating less like a guess-game.

[timogasda]

Hello @yer421!
Please provide a reproducible example (ideally with CodeSandbox) so we can investigate this issue. Otherwise this issue will be resolved.

[yer421]

I've included a video of what happens when trying to click on an item of the dropdown of the Autosuggest tool. The dropdown list comes from an API call so I can't include that within my code. As you can see from the video, using the down arrows and then clicking Enter works, but the mouse click does not work in the component. Let me know if you need anything else. Thanks, Yer

[yer421]

Sorry for the late response, I've been on PTO. I've included a screen recording of what happens when trying to click on options in the dropdown of the auto suggest tool. The dropdown is a list generated from an API call. Let me know if this helps. Thanks, Yer

[connorlanigan]

Hi @yer421, it sounds like you responded to this thread via email with an attachment, but GitHub did not include the attachment here. Could you try uploading it through GitHub's web interface?

Also, if you can reproduce the issue with code that you can share (e.g. by replacing the API call with placeholder data, removing unrelated components / proprietary code etc), it would be great if you could include the code (e.g. in CodeSandbox).

[just-boris]

Closing due to inactivity. Feel free to reopen if you have more questions