fix: make autoFocus a prop on FeedbackForm, only apply in modal context
This commit is contained in:
@@ -10,7 +10,7 @@ const CATEGORIES = [
|
|||||||
{ value: 'GENERAL', label: 'General feedback' },
|
{ value: 'GENERAL', label: 'General feedback' },
|
||||||
]
|
]
|
||||||
|
|
||||||
export function FeedbackForm({ onSuccess }: { onSuccess?: () => void }) {
|
export function FeedbackForm({ onSuccess, autoFocus = false }: { onSuccess?: () => void; autoFocus?: boolean }) {
|
||||||
const [category, setCategory] = useState('BUG')
|
const [category, setCategory] = useState('BUG')
|
||||||
const [message, setMessage] = useState('')
|
const [message, setMessage] = useState('')
|
||||||
const [email, setEmail] = useState('')
|
const [email, setEmail] = useState('')
|
||||||
@@ -64,7 +64,7 @@ export function FeedbackForm({ onSuccess }: { onSuccess?: () => void }) {
|
|||||||
value={category}
|
value={category}
|
||||||
onChange={(e) => setCategory(e.target.value)}
|
onChange={(e) => setCategory(e.target.value)}
|
||||||
disabled={status === 'loading'}
|
disabled={status === 'loading'}
|
||||||
autoFocus
|
autoFocus={autoFocus}
|
||||||
className="w-full appearance-none rounded-lg border border-zinc-800 bg-zinc-950 px-3 py-2.5 text-sm text-zinc-200 focus:border-amber-500/40 focus:outline-none disabled:opacity-50"
|
className="w-full appearance-none rounded-lg border border-zinc-800 bg-zinc-950 px-3 py-2.5 text-sm text-zinc-200 focus:border-amber-500/40 focus:outline-none disabled:opacity-50"
|
||||||
>
|
>
|
||||||
{CATEGORIES.map((c) => (
|
{CATEGORIES.map((c) => (
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ export function FeedbackModal({
|
|||||||
<XMarkIcon className="h-5 w-5" />
|
<XMarkIcon className="h-5 w-5" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<FeedbackForm onSuccess={onClose} />
|
<FeedbackForm onSuccess={onClose} autoFocus />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user