root/sp
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix(sase): Ara search button — Base UI Button forces type='button'

Browse Source 
Root cause: @base-ui/react's Button hard-overrides the type prop to
'button' via getButtonProps in useButton(). Even when we write
<Button type='submit'>, mergeProps replaces it with 'button' before
DOM, so the button does nothing inside a form. Visually it looks
disabled because clicking it doesn't trigger any state change.

Fix: for form submit buttons, use a native <button type='submit'>
styled with buttonVariants() to match. Onsubmit was already in place
from the previous commit — this is the missing half.

Applied to both VIN list and user list filter bars.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Semih
2026-05-19 08:25:49 +03:00
parent 931bcda35d
commit 38429a98cd
2 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/web/src/app/projects/sase/users/_filter-bar.tsx
View File

@@ -3,7 +3,7 @@
import { useRouter, useSearchParams, usePathname } from "next/navigation";
import { useState, useTransition } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Button, buttonVariants } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { buildHref, toggleArray, type UsersSearchParams } from "./_query";
@@ -80,9 +80,14 @@ export function UsersFilterBar({
placeholder="Email, isim veya user ID ile ara…"
className="max-w-md"
/>
<Button type="submit" disabled={pending} size="sm">
{/* Base UI <Button> hard-overrides type to "button" — native button. */}
<button
type="submit"
disabled={pending}
className={buttonVariants({ variant: "default", size: "sm" })}
>
Ara
</Button>
</button>
{Object.values(current).some((v) => v !== undefined && v !== "") && (
<Button
type="button"

13
apps/web/src/app/projects/sase/vin-decode/vins/_filter-bar.tsx
View File

@@ -3,7 +3,7 @@
import { useRouter, useSearchParams, usePathname } from "next/navigation";
import { useState, useTransition } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Button, buttonVariants } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { buildHref, toggleArray, type VinsSearchParams } from "./_query";
@@ -61,9 +61,16 @@ export function VinsFilterBar({ initial }: { initial: VinsSearchParams }) {
placeholder="VIN veya email ile ara…"
className="max-w-md"
/>
<Button type="submit" disabled={pending} size="sm">
{/* Base UI's <Button> hard-overrides type to "button" via useButton,
so it can't act as a form submit. Use a native <button> with
buttonVariants for matching styles. */}
<button
type="submit"
disabled={pending}
className={buttonVariants({ variant: "default", size: "sm" })}
>
Ara
</Button>
</button>
{(current.q ||
current.provider ||
current.success ||