Skip to content

Commit

Permalink
fix: input caret jumping
Browse files Browse the repository at this point in the history
  • Loading branch information
mmpneo committed Jul 25, 2023
1 parent b8d9241 commit dbcaf56
Showing 1 changed file with 13 additions and 3 deletions.
16 changes: 13 additions & 3 deletions src/server/ui/inspector/components/input/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import NiceModal from "@ebay/nice-modal-react";
import { useId } from "@floating-ui/react-dom-interactions";
import classNames from "classnames/bind";
import { FC, forwardRef, InputHTMLAttributes, memo, PropsWithChildren, ReactNode, useCallback, useEffect, useRef, useState } from "react";
import { ChangeEvent, FC, forwardRef, InputHTMLAttributes, memo, PropsWithChildren, ReactNode, useCallback, useEffect, useRef, useState } from "react";
import { RgbaColor, RgbaColorPicker } from "react-colorful";
import { RiDeleteBack2Fill, RiUpload2Fill, RiKeyboardBoxFill, RiDeleteBin3Fill, RiCheckboxCircleFill, RiAddCircleFill, RiEdit2Fill, RiRecordCircleFill, RiCloseCircleFill } from "react-icons/ri";
import { HiChevronDown, HiChevronUp } from "react-icons/hi";
Expand Down Expand Up @@ -36,7 +36,18 @@ export const InputContainer: FC<PropsWithChildren<{ id?: string, vertical?: bool
</div>
});

export const InputBaseText: FC<InputHTMLAttributes<HTMLInputElement> & {fieldWidth?: boolean}> = memo(({fieldWidth = true, ...props}) => <input {...props} className={cx(styles.clearAppearance, props.className, {"field-width": fieldWidth}, "input input-bordered overflow-hidden input-sm font-semibold leading-none")} />);
export const InputBaseText: FC<InputHTMLAttributes<HTMLInputElement> & {fieldWidth?: boolean}> = ({value, onChange, fieldWidth = true, ...props}) => {
const [internalValue, setInternalValue] = useState(value);
useEffect(() => {
if (value !== internalValue)
setInternalValue(value);
}, [value])
const updateVal = (val: ChangeEvent<HTMLInputElement>) => {
setInternalValue(val.target.value);
onChange?.(val);
};
return <input {...props} value={internalValue} onChange={updateVal} className={cx(styles.clearAppearance, props.className, { "field-width": fieldWidth }, "input input-bordered overflow-hidden input-sm font-semibold leading-none")} />;
};

interface InputTextProps extends InputBaseProps, InputHTMLAttributes<HTMLInputElement> { }

Expand Down Expand Up @@ -563,7 +574,6 @@ interface AudioOutputProps extends InputBaseProps {
}
export const InputNativeAudioOutput: FC<AudioOutputProps> = memo(({ label, value, onChange }) => {
const [config, setConfig] = useState<WindowsConfig>();

useEffect(() => {
invoke<WindowsConfig>("plugin:windows_tts|get_voices").then(setConfig);
}, []);
Expand Down

0 comments on commit dbcaf56

Please sign in to comment.