Input box inside dropdown highlighting value when move moves

[kyusungpark]

Hi, I have a component like this:
I have a dropdown which contains a Sheet which also contains a form with bunch of inputs.
Now, when I expand the dropdown and click on the button to open up the sheet + form and start moving my mouse, it keeps auto highlighting the contents of my input box. Anyone know where the problem might be coming from?

export const createActionColumn = <T,>(getActions: (row: T) => ActionItem[]): ColumnDef<T> => ({
  id: 'component',
  enableHiding: false,
  cell: ({ row }) => <ActionCell actions={getActions(row.original)} />,
});

const ActionCell = ({ actions }: ActionCell) => {
  const handleClick = (e: Event, action: ActionItem) => {
    e.preventDefault();
    e.stopPropagation();

    if (action.onClick) {
      action.onClick();
    }
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" className="h-8 w-8 p-0">
          <span className="sr-only">Open menu</span>
          <MoreHorizontal className="h-4 w-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuLabel>Actions</DropdownMenuLabel>
        <DropdownMenuSeparator />
        {actions.map((action, index) => (
          <DropdownMenuItem
            key={index}
            onSelect={(e) => handleClick(e, action)}
          >
            {action.label}
            {action.component}
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
};


const AppSheetForm = ({ title, description, FormComponent, action = 'CREATE' }: AppSheetForm) => {
  const isCreate = action === 'CREATE';

  return (
    <Sheet modal>
      <SheetTrigger asChild>
        <Button
          variant={isCreate ? 'default' : 'outline'}
          size="sm"
          className="h-8 w-full max-w-36 gap-1"
        >
          {isCreate ? <PlusCircle className="h-3.5 w-3.5" /> : <Pencil className="h-3.5 w-3.5" />}
          <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">{title}</span>
        </Button>
      </SheetTrigger>
      <SheetContent className="space-y-2">
        <SheetHeader>
          <SheetTitle>{title}</SheetTitle>
          <SheetDescription>{description}</SheetDescription>
        </SheetHeader>
        {FormComponent}
      </SheetContent>
    </Sheet>
  );
};

const CourseForm = ({ action, initialValues }: CourseForm) => {
...

  return (
    <Form {...form}>
      <AppFormInput disabled form={form} name="schoolId" label="School Id" />
      {role === 'SuperAdmin' && action === 'UPDATE' && (
        <AppFormInput disabled={action !== 'UPDATE'} form={form} name="id" label="Course Id" />
      )}
      <AppFormInput disabled={action === 'UPDATE'} form={form} name="name" label="Name" />
      <AppFormInput form={form} name="description" label="Description" />
      <AppFormInput form={form} name="price" label="Price" />

      <AppFormSelect<FormSchema>
        disabled={action === 'UPDATE'}
        form={form}
        name="type"
        label="Type"
        options={courseOptions}
        placeholder="Course Type"
      />

      <AppFormSelect<FormSchema>
        form={form}
        name="status"
        label="Status"
        options={statusOptions}
        placeholder="Active"
      />

      <AppFormFooter isLoading={creatingCourse || updatingCourse} handleSubmit={handleSubmit} />
    </Form>
  );
};


const AppFormInput = <T extends FieldValues>({
  form,
  name,
  label,
  disabled,
  placeholder,
  type,
  tooltip,
}: AppFormInput<T>) => {
  return (
    <FormField
      control={form.control}
      name={name}
      render={({ field }) => (
        <FormItem className="mt-2">
          <FormLabel className="flex items-center space-x-2">
            <span>{label}</span>
            {tooltip && <AppTooltip tooltip={tooltip} />}
          </FormLabel>
          <FormControl>
            <Input
              disabled={disabled}
              placeholder={placeholder}
              type={type}
              autoComplete="on"
              {...field}
            />
          </FormControl>
          <FormMessage className="text-xs" />
        </FormItem>
      )}
    />
  );
};

To summarize:

1. User expands the dropdown
2. clicks on the dropdown button to open the Sheet + Form
3. Mouse movement highlights the whole value in the input box.

• Another problem that I have is that it does not close the dropdown when user clicks on the dropbox item.

Any ideas on how to fix auto highlighting on mouse movement?