[BUG] - In the Input component I cannot use cursor to move within text.

[uigywnkiub]

NextUI Version

2.4.2

Describe the bug

In the Input component, I cannot use option/command + arrow left/right to move within text.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1) Go inside into any Input component. 2) Type some text. 3) Use option/command + arrow left/right to move within text.

Expected behavior

The cursor must move within text with default keys as it has in any other input fields.

Screenshots or Videos

https://github.com/nextui-org/nextui/assets/29861553/e980dff5-0452-4af0-9014-32587cba523c

Operating System Version

• OS: macOS

Browser

Chrome

[linear[bot]]

ENG-1071 [BUG] - In the Input component I cannot use cursor to move within text.

[wingkwong]

I just tested it on the input storybook and didn't reproduce the issue. Please provide a minimal reproducible environment.

[uigywnkiub]

Please provide a minimal reproducible environment.

Oh, looks like bug with input if it inside accordion.

    <Accordion
        isCompact
        hideIndicator
        onExpandedChange={onExpandedChange}
        defaultExpandedKeys={isInitialExpanded}
        className='p-0'
        itemClasses={{
          titleWrapper: 'border-none focus:ring-0 placeholder:text-default-500',
        }}
      >
        <AccordionItem
          key={ACCORDION_ITEM_KEY}
          isCompact
          aria-label={accordionTitle}
          title={accordionTitle}
          classNames={{
            title: 'text-center hover:opacity-hover',
          }}
        >
          <div className='px-2'>
            <Input
              size='lg'
              color='primary'
              isClearable
              placeholder={placeholder}
              onClear={() => [handleSearch(''), setSearchTerm('')]}
              onChange={handleInputChange}
              defaultValue={searchTerm}
              classNames={{
                input: 'border-none focus:ring-0 placeholder:text-default-500',
                inputWrapper: 'h-20 my-2 px-4',
              }}
            />
          </div>
        </AccordionItem>
      </Accordion>