Просмотр исходного кода

fix(ui): prevent focus on share popover text field

David Hill 4 недель назад
Родитель
Сommit
30111d2b16

+ 2 - 2
packages/app/src/components/session/session-header.tsx

@@ -195,8 +195,8 @@ export function SessionHeader() {
                           </div>
                         }
                       >
-                        <div class="flex flex-col gap-2 w-72">
-                          <TextField value={shareUrl() ?? ""} readOnly copyable class="w-full" />
+                        <div class="flex flex-col gap-2">
+                          <TextField value={shareUrl() ?? ""} readOnly copyable tabIndex={-1} class="w-full" />
                           <div class="grid grid-cols-2 gap-2">
                             <Button
                               size="large"

+ 1 - 1
packages/ui/src/components/text-field.css

@@ -51,7 +51,7 @@
       border: 1px solid var(--border-weak-base);
       background: var(--input-base);
 
-      &:focus-within {
+      &:focus-within:not(:has([data-readonly])) {
         border-color: transparent;
         /* border/shadow-xs/select */
         box-shadow:

+ 1 - 0
packages/ui/src/components/text-field.tsx

@@ -102,6 +102,7 @@ export function TextField(props: TextFieldProps) {
               icon={copied() ? "check" : "link"}
               variant="ghost"
               onClick={handleCopy}
+              tabIndex={-1}
               data-slot="input-copy-button"
               aria-label={copied() ? i18n.t("ui.textField.copied") : i18n.t("ui.textField.copyToClipboard")}
             />