fix: user input for tag editor and other misc inputs (#1730)

aeharding · Nov 17, 2024 · 1779f55 · 1779f55
1 parent cc72f1a
commit 1779f55
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 14 deletions.
diff --git a/src/features/auth/login/login/PickLoginServer.tsx b/src/features/auth/login/login/PickLoginServer.tsx
@@ -164,7 +164,7 @@ export default function PickLoginServer() {
 
           <IonSearchbar
             ref={searchbarRef}
-            enterkeyhint="go"
+            enterkeyhint="next"
             placeholder="Enter URL or search for your server"
             inputMode="url"
             onKeyDown={(e) => {

diff --git a/src/features/auth/login/pickJoinServer/PickJoinServer.tsx b/src/features/auth/login/pickJoinServer/PickJoinServer.tsx
@@ -43,6 +43,7 @@ import Login from "#/features/auth/login/login/Login";
 import AppHeader from "#/features/shared/AppHeader";
 import { DynamicDismissableModalContext } from "#/features/shared/DynamicDismissableModal";
 import { isIosTheme } from "#/helpers/device";
+import { blurOnEnter } from "#/helpers/dom";
 import { isMinimumSupportedLemmyVersion } from "#/helpers/lemmy";
 import { isValidHostname, stripProtocol } from "#/helpers/url";
 import { defaultServersUntouched, getCustomServers } from "#/services/app";
@@ -349,13 +350,9 @@ export default function PickJoinServer() {
           <StyledIonSearchbar
             value={search}
             onIonInput={(e) => setSearch(e.detail.value || "")}
-            onKeyDown={(e) => {
-              if (e.key !== "Enter") return;
-
-              if (e.target instanceof HTMLElement) e.target.blur();
-            }}
+            onKeyDown={blurOnEnter}
             inputMode="url"
-            enterkeyhint="go"
+            enterkeyhint="done"
           />
           <Filters
             hasRecommended={hasRecommended}

diff --git a/src/features/tags/UserTag.tsx b/src/features/tags/UserTag.tsx
@@ -12,7 +12,8 @@ const TagContainer = styled.span`
   overflow: hidden;
   text-overflow: ellipsis;
 
-  background: var(--bg, var(--lightroom-bg));
+  background: var(--lightroom-bg);
+  color: var(--ion-color-medium);
 
   border-radius: 4px;
   padding: 0 4px;
@@ -85,8 +86,7 @@ function SyncUserTag({ tag }: SyncUserTagProps) {
       style={
         tag.color
           ? {
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              ["--bg" as any]: tag.color,
+              background: tag.color,
               color: getTextColorFor(tag.color),
             }
           : undefined

diff --git a/src/features/tags/UserTagModal.tsx b/src/features/tags/UserTagModal.tsx
@@ -16,6 +16,7 @@ import { useState } from "react";
 import { Centered } from "#/features/auth/login/LoginNav";
 import PersonLink from "#/features/labels/links/PersonLink";
 import AppHeader from "#/features/shared/AppHeader";
+import { blurOnEnter } from "#/helpers/dom";
 import { getRemoteHandle } from "#/helpers/lemmy";
 
 import { useAppDispatch, useAppSelector } from "../../store";
@@ -44,10 +45,14 @@ const UserText = styled(IonText)`
 `;
 
 const ColorIonInput = styled(IonInput)`
-  .native-wrapper {
+  .native-input {
     max-width: 42px;
   }
 
+  .input-clear-icon {
+    margin: 0 0 0 auto;
+  }
+
   && input {
     appearance: none;
     border-radius: 4px;
@@ -174,6 +179,12 @@ function UserTagModalContents({
               clearInput
               placeholder="Private user note"
               value={tag.text}
+              inputMode="text"
+              autocapitalize="on"
+              autocorrect="on"
+              spellCheck
+              enterKeyHint="done"
+              onKeyDown={blurOnEnter}
               onIonInput={(e) => {
                 setTag((tag) => {
                   const newTag = { ...tag, text: e.detail.value ?? "" };
@@ -191,9 +202,9 @@ function UserTagModalContents({
           <IonItem>
             <ColorIonInput
               label="Color"
-              // TODO add Ionic support for color input
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              type={"color" as any}
+              // @ts-expect-error -- add Ionic support for color input
+              type="color"
+              clearInput
               value={tag.color}
               onIonInput={(e) => {
                 setTag((tag) => {

diff --git a/src/helpers/dom.ts b/src/helpers/dom.ts
@@ -1,3 +1,5 @@
+import { KeyboardEvent } from "react";
+
 import { ua } from "./device";
 
 export const useScrollIntoViewWorkaround = ua.getEngine().name === "WebKit";
@@ -138,3 +140,9 @@ export function getSelectionHtml(selection: Selection): string {
 
   return html;
 }
+
+export function blurOnEnter(e: KeyboardEvent) {
+  if (e.key !== "Enter") return;
+
+  if (e.target instanceof HTMLElement) e.target.blur();
+}