选择后面的按钮也被单击（使用Shadcn）

Question

我构建了一个表单，用户可以在其中选择下拉菜单，从中选择产品类别。我使用的是 Shadcn 中的一个选择。当我打开选择并选择一个类别时，它会触发位于所选选项后面的按钮。根据我所读到的内容，这是一个 Shadcn/Radix 问题。也许这里有人找到了解决同样问题的方法。

<form
    onSubmit={handleSubmit}
    className='flex flex-col bg-white px-8 pt-1 pb-8 mt-6'
>
    <label htmlFor='name' className='mb-1 mt-1'>
        Product Name
    </label>
    <input
        className='mb-4 border-b-2'
        id='name'
        name='name'
        type='text'
        placeholder='What do you wish to rent?'
        value={input.name}
        onChange={handleChange}
        required
    />
    <label htmlFor='description' className='mb-1 mt-1'>
        Product Description
    </label>
    <input
        className='mb-4 border-b-2'
        id='description'
        name='description'
        type='text'
        placeholder='Describe your product'
        value={input.description}
        onChange={handleChange}
        required
    />
    <label htmlFor='location' className='mb-1 mt-1'>
        Pick up address
    </label>
    <input
        className='mb-4 border-b-2'
        id='location'
        name='location'
        type='text'
        placeholder='Where to pick up your tool?'
        value={input.location}
        onChange={handleChange}
        required
    />
    <div className='flex flex-row justify-between'>
        <label htmlFor='dailyRate' className='mb-1 mt-1'>
            Daily rate
        </label>
        <input
            className='mb-4 border-b-2 w-20 mt-1'
            id='dailyRate'
            name='dailyRate'
            type='number'
            placeholder='€'
            value={input.dailyRate}
            onChange={handleChange}
            required
        />
    </div>
    <div className='flex flex-row justify-between'>
        <label htmlFor='weeklyRate' className='mb-1 mt-1'>
            Weekly rate
        </label>
        <input
            className='mb-4 border-b-2 w-20 mt-1'
            id='weeklyRate'
            name='weeklyRate'
            type='number'
            placeholder='€'
            value={input.weeklyRate || ''}
            onChange={handleChange}
        />
    </div>
    <div className='flex flex-row justify-between mt-1'>
        <label htmlFor='monthlyRate' className='mb-1'>
            Monthly rate
        </label>
        <input
            className='mb-4 border-b-2 w-20'
            id='monthlyRate'
            name='monthlyRate'
            type='number'
            placeholder='€'
            value={input.monthlyRate || ''}
            onChange={handleChange}
        />
    </div>
    <div className='flex flex-col justify-between'>
        <label htmlFor='image' className='mb-4'>
            Product image
        </label>
        <Input id="picture" type="file" onChange={handleFileChange} className='bg-darkGreen p-2 text-white text-sm rounded-md pl-8'/>
    </div>
    <div className='flex flex-row justify-between mt-4 mb-10'>
        <label htmlFor='category' className='mb-1 mt-5'>
            Category
        </label>
        <Select
            onValueChange={(value) =>
                handleSelectChange('toolCategoryId', value)
            }
            name='toolCategoryId'
            value={input.toolCategoryId}
        >
            <SelectTrigger className='w-45 mt-3'>
                <SelectValue placeholder='Select a category' />
            </SelectTrigger>
            <SelectContent>
                {categories.map((category) => (
                    <SelectItem key={category.id} value={category.id} onClick={(e) => e.stopPropagation()}>
                        {category.categoryName}
                    </SelectItem>
                ))}
            </SelectContent>
        </Select>
    </div>
    <div className='flex items-center justify-center'>
        <button
            type='submit'
            className='bg-darkGreen pt-4 pb-4 pl-20 pr-20 text-white text-sm rounded-md'
        >
            Submit
        </button>
    </div>
</form>
 

Answer 1

你可以看看这个踏板。这对我有用！ https://github.com/shadcn-ui/ui/issues/2721