Merge pull request #1211 from Wizleap-Inc/feat/1198_input

base-inputのFocusの色をデフォルトのものにする
Wizleap-Inc · Feb 22, 2024 · f1e5df1 · f1e5df1
2 parents cfdec06 + 7142f41
commit f1e5df1
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 21 deletions.
diff --git a/.changeset/seven-carrots-sparkle.md b/.changeset/seven-carrots-sparkle.md
@@ -0,0 +1,7 @@
+---
+"@wizleap-inc/wiz-ui-react": patch
+"@wizleap-inc/wiz-ui-next": patch
+"@wizleap-inc/wiz-ui-styles": patch
+---
+
+[#1198] focus 時の色をブラウザーデフォルトのものに修正
diff --git a/packages/styles/bases/base-input.css.ts b/packages/styles/bases/base-input.css.ts
@@ -12,9 +12,6 @@ export const baseInputStyle = style({
     color: THEME.color.gray[500],
     fontSize: `calc((${THEME.fontSize.sm} + ${THEME.fontSize.xs}) / 2)`,
   },
-  ":focus": {
-    outline: "none",
-  },
 });
 
 export const baseInputPaddingStyle = styleVariants({

diff --git a/packages/wiz-ui-next/src/components/base/inputs/base/base.vue b/packages/wiz-ui-next/src/components/base/inputs/base/base.vue
@@ -26,7 +26,7 @@ import {
   baseInputPaddingStyle,
 } from "@wizleap-inc/wiz-ui-styles/bases/base-input.css";
 import { inputBorderStyle } from "@wizleap-inc/wiz-ui-styles/commons";
-import { computed, ref, PropType } from "vue";
+import { computed, PropType } from "vue";
 
 defineOptions({
   name: ComponentName.BaseInput,
@@ -91,22 +91,17 @@ const textValue = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
-const hasFocus = ref(false);
-
 const computedWidth = computed(() => (props.expand ? "100%" : props.width));
 
 const state = computed(() => {
   if (props.error) return "error";
-  if (hasFocus.value) return "active";
   return "default";
 });
 
 const onFocusIn = (e: FocusEvent) => {
-  hasFocus.value = true;
   emit("focusin", e);
 };
 const onFocusOut = (e: FocusEvent) => {
-  hasFocus.value = false;
   emit("focusout", e);
 };
 </script>
diff --git a/packages/wiz-ui-react/src/components/base/inputs/base/components/base-input.tsx b/packages/wiz-ui-react/src/components/base/inputs/base/components/base-input.tsx
@@ -2,13 +2,7 @@ import { ComponentName } from "@wizleap-inc/wiz-ui-constants";
 import * as styles from "@wizleap-inc/wiz-ui-styles/bases/base-input.css";
 import { inputBorderStyle } from "@wizleap-inc/wiz-ui-styles/commons";
 import { clsx } from "clsx";
-import {
-  ComponentProps,
-  ForwardedRef,
-  forwardRef,
-  memo,
-  useState,
-} from "react";
+import { ComponentProps, ForwardedRef, forwardRef, memo } from "react";
 
 import { BaseProps } from "@/types";
 type Props = BaseProps & {
@@ -41,11 +35,8 @@ const _PrivateBaseInput = forwardRef(
     }: Props,
     ref: ForwardedRef<HTMLInputElement>
   ) => {
-    const [hasFocus, setHasFocus] = useState(false);
-
     const state = (() => {
       if (error) return "error";
-      if (hasFocus) return "active";
       return "default";
     })();
 
@@ -66,11 +57,9 @@ const _PrivateBaseInput = forwardRef(
         type={type}
         id={id}
         onFocus={(e) => {
-          setHasFocus(true);
           props.onFocus?.(e);
         }}
         onBlur={(e) => {
-          setHasFocus(false);
           props.onBlur?.(e);
         }}
         onChange={props.onChange}