[BUG] - 2.6.3 iOS - Pressing DropdownItem breaks text selection (html tag adds -webkit-user-select: none)

[daveycodez]

NextUI Version

2.6.3

Describe the bug

This is definitely a pretty significant issue. In iOS, if you long press in Safari you can select text. This works totally fine with a NextUI website. If you open and close a DropdownMenu, it continues to work normally, but if you tap a DropdownItem, you will no longer be able to select any text until you do a hard refresh. I might have to pull all DropdownMenu's from my website if it breaks text selection for iOS users. Controlled Popovers do not cause this issue

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Open a DropdownMenu and press a DropdownItem on Safari then attempt to select text by tapping and holding any text.

Expected behavior

Should be able to continue to select text in iOS even after pressing a DropdownItem

Screenshots or Videos

No response

Operating System Version

iOS

Browser

Safari

[linear]

ENG-1609 [BUG] - iOS - Selecting DropdownItem breaks text selection

[daveycodez]

I don't think I will be able to use this in production since my target audience is iOS users so if this doesn't even get a response soon I think I might have to jump ship here

import { Button, Card, CardBody, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from "@nextui-org/react";

export default function IndexPage() {
    return (
        <div className="flex flex-center items-center w-full h-full justify-center">
            <Card>
                <CardBody>
                    Hello Lorem Ipsum Dolor Sit Amet
                </CardBody>
            </Card>
            <Dropdown>
                <DropdownTrigger>
                    <Button variant="bordered">Open Menu</Button>
                </DropdownTrigger>
                <DropdownMenu aria-label="Static Actions">
                    <DropdownItem key="new">New file</DropdownItem>
                    <DropdownItem key="copy">Copy link</DropdownItem>
                    <DropdownItem key="edit">Edit file</DropdownItem>
                    <DropdownItem key="delete" className="text-danger" color="danger">
                        Delete file
                    </DropdownItem>
                </DropdownMenu>
            </Dropdown>
        </div>
    )
}

This breaks text selection of the CardBody if you tap any DropdownItem on iOS.

[daveycodez]

This is caused when you select a DropdownItem it adds -webkit-user-select: none; to html tag and never removes it.

body {
  user-select: auto;
  -webkit-user-select: auto;
}

or

html {
    user-select: auto !important;
    -webkit-user-select: auto !important;
}

^^ My hack to fix it