Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: trigger onChange twice when inputting using the input method #60

Closed
wants to merge 4 commits into from
Closed

fix: trigger onChange twice when inputting using the input method #60

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
92486ac
fix: trigger onChange twice when inputting using the input method
Adrian-Zephyr-Liao Dec 25, 2023
2b01a69
style: if statement wrapped in braces
Adrian-Zephyr-Liao Dec 25, 2023
01f47ba
test: add test cases for onChange when input method combination is input
Adrian-Zephyr-Liao Dec 25, 2023
a8a9b4e
perf: extracts the logic of the formatter, the condition calls trigge…
Adrian-Zephyr-Liao Dec 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 14 additions & 9 deletions src/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,14 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
const valueLength = countConfig.strategy(formatValue);

const isOutOfRange = !!mergedMax && valueLength > mergedMax;
const isExceed = (currentValue: string) => {
return (
!compositionRef.current &&
countConfig.exceedFormatter &&
countConfig.max &&
countConfig.strategy(currentValue) > countConfig.max
);
};

// ======================= Ref ========================
useImperativeHandle(ref, () => ({
Expand Down Expand Up @@ -100,14 +108,9 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
) => {
let cutValue = currentValue;

if (
!compositionRef.current &&
countConfig.exceedFormatter &&
countConfig.max &&
countConfig.strategy(currentValue) > countConfig.max
) {
cutValue = countConfig.exceedFormatter(currentValue, {
max: countConfig.max,
if (isExceed(currentValue)) {
cutValue = countConfig.exceedFormatter!(currentValue, {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里不要使用!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isExceed 里确实判断，看有没有更好的代替？

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我目前能想到的还有一个思路是：
将formatter相关的代码抽离出来，返回一个cutValue和isExceed
const { cutValue, isExceed } = onInternalFormatter(e.currentTarget.value);
在onInternalChange的事件中，formatter后直接触发triggerChange
在onInternalCompositionEnd的事件中，判断是否isExceed，如果为true就触发triggerChange

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

感觉这样会容易混淆逻辑 🤔

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我认为fomatter是一个独立的事情，isExceed和cutValue都是和formatter相关的内容，表示格式化后是否超出限制和最终裁剪的值。目前的处境是在change的时候需要格式化，在compositionEnd的时候需要格式化并且条件调用change

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

改改看

max: countConfig.max!,
});

if (currentValue !== cutValue) {
Expand Down Expand Up @@ -138,7 +141,9 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
e: React.CompositionEvent<HTMLInputElement>,
) => {
compositionRef.current = false;
triggerChange(e, e.currentTarget.value);
if (isExceed(e.currentTarget.value)) {
triggerChange(e, e.currentTarget.value);
}
onCompositionEnd?.(e);
};

Expand Down
39 changes: 39 additions & 0 deletions tests/count.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,45 @@ describe('Input.Count', () => {
expect(setSelectionRange).toHaveBeenCalledWith(2, 2);
});

it('input using the input method should trigger onChange once', () => {
const onChange = jest.fn();
const { container } = render(<Input onChange={onChange} />);
const input = container.querySelector('input')!;
fireEvent.compositionStart(input);
fireEvent.compositionUpdate(input, { data: '你' });
fireEvent.compositionEnd(input, { data: '你好' });
fireEvent.input(input, { target: { value: '你好' } });
expect(onChange).toHaveBeenCalledTimes(1);
});

it('using the input method to enter the cropped content should trigger onChange twice', () => {
const onChange = jest.fn();
const onCompositionEnd = jest.fn();
const { container } = render(
<Input
count={{
show: true,
max: 3,
exceedFormatter: (val, { max }) =>
getSegments(val)
.filter((seg) => seg.index + seg.segment.length <= max)
.map((seg) => seg.segment)
.join(''),
}}
onChange={onChange}
onCompositionEnd={onCompositionEnd}
/>,
);
const input = container.querySelector('input')!;
fireEvent.compositionStart(input);
fireEvent.compositionUpdate(input, { target: { value: '你' } });
fireEvent.compositionUpdate(input, { target: { value: '你好' } });
fireEvent.compositionUpdate(input, { target: { value: '你好世' } });
fireEvent.compositionUpdate(input, { target: { value: '你好世界' } });
fireEvent.compositionEnd(input, { target: { value: '你好世界' } });
expect(input?.value).toEqual('你好世');
});

describe('cls', () => {
it('raw', () => {
const { container } = render(
Expand Down