diff --git a/.changeset/seven-carrots-sparkle.md b/.changeset/seven-carrots-sparkle.md new file mode 100644 index 000000000..aaeb133e3 --- /dev/null +++ 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 index 80f2544a4..a94cef33c 100644 --- 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 index 90221bb2f..96b4f1acd 100644 --- 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); }; 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 index 630cedb38..c9d53a76b 100644 --- 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 ) => { - 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}