[BUG] - Inputs focus overflows wrapper UI

[uigywnkiub]

NextUI Version

2.4.2

Describe the bug

Inputs focus overflows wrapper UI when i focus on the for example via Tab button.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1) Create any input field. 2) Try to focus on them for example via button Tab. (in my case parent do not have paddings)

Expected behavior

I must not overflow parent wrapper with outlined lines, my temp fix is set padding left and right to parent to fix it overflows.

Screenshots or Videos

https://github.com/nextui-org/nextui/assets/29861553/399d6210-cc7a-4814-b1a7-bec736a76ecc

Operating System Version

• OS: macOS

Browser

Chrome

[linear[bot]]

ENG-1125 [BUG] - Inputs focus overflows wrapper UI

[wingkwong]

please share a minimal reproducible environment

[uigywnkiub]

please share a minimal reproducible environment

    <Accordion
      isCompact
      hideIndicator
      onExpandedChange={onExpandedChange}
      defaultExpandedKeys={isInitialExpanded}
      className='p-0'
    >
      <AccordionItem
        key={ACCORDION_ITEM_KEY}
        isCompact
        aria-label={accordionTitle}
        title={accordionTitle}
        classNames={{
          title: 'text-center hover:opacity-hover',
        }}
      >
        <Switch
          isDisabled={pending}
          color='success'
          name='isIncome'
          value='isIncome'
          aria-label='Income Switch'
          onValueChange={(isSelected) => setIsSwitchedOn(isSelected)}
        >
          Income
        </Switch>
        <Input
          isDisabled={pending}
          isRequired
          type='text'
          ...

[wingkwong]

That's not minimal reproducible environment.

[uigywnkiub]

That's not minimal reproducible environment.

What is minimal reproducible environment? Why are you always need this? Refactor issue to user type this reproducible environment! I get you all, screen and video, code, meta data like os and so on... What else do you need? keys from the flat?

[awesome-pro]

@uigywnkiub, Sir has meant to share your code in some virtual reproducing enviroment something like

CodeSandBox OR StackBlittz

You can use these to virtual app showing the bug. It will help us to debug more efficiently. I hope you understand it :)

[wingkwong]

@uigywnkiub You can probably check out here. This is a common practice when you ask for help. The reason is that if you just provide a partial code, we need to figure out the rest. This is not efficient at all. Even we spend time to complete the code, it still may not be able to reproduce the issue since there is lots of hidden things blocking us to reproduce the issue, e.g. misconfiguration, misuse of style classes, missing components etc.

Just an simple example, previously you reported an issue about cursor move in input while you didn't mention that the input is inside accordion at first, and it turned out the issue comes from accordion, not input. A minimal reproducible environment allows us to investigate the issue faster and understand it on the same ground.

[uigywnkiub]

here

I never knew what is MRE) By the way, reporting a bugs process is a bit complicated for me.

[awesome-pro]

@uigywnkiub I could solve your issue if you could provide MRE

[awesome-pro]

@uigywnkiub I have got your point, but the issue is not visible in storybook. There is no focus overflow with the following code

<div className="w-full max-w-2xl">
    <Input {...args} className="w-full bg-success-50" />
</div>

Kindly check if you having some tailwind issue like overflow-hidden and max-w- togethar. I hope it should solve your issue.

[wingkwong]

Closing - no MRE provided.