Skip to content

fix(InputMask): set element value to '' when props.value is empty (null, undefined, '') #7897

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

Jump to bottom
Merged
melloware merged 1 commit into from
Apr 13, 2025
Merged

fix(InputMask): set element value to '' when props.value is empty (null, undefined, '') #7897

melloware merged 1 commit into from
Apr 13, 2025

Conversation

@KumJungMin
Copy link
Contributor

@KumJungMin KumJungMin commented Apr 13, 2025

Defect Fixes


How To Resolve

Cause

  • When the default value of props.value is an empty string (''), updating it later to a valid value (e.g., '01/01/2025') does not update the input mask correctly.
  • This is because in the updateValue function, '' is not treated as an "empty" value, so it falls into the else block:
const updateValue = (allow) => {
    let pos;

    if (elementRef.current) {
        if (props.value === null) {
            elementRef.current.value = '';
        } else { // this block gets called
            elementRef.current.value = props.value;
            pos = checkVal(allow);

            setTimeout(() => {
                if (elementRef.current) {
                    writeBuffer(); // this gets triggered
                    return checkVal(allow);
                }
            }, 10);
        }
    }
};

  • As a result, writeBuffer runs and sets elementRef.current.value to '__/__/____'.
  • Then isValueUpdated() returns false, so even though props.value changes, useUpdateEffect is not triggered:
const isValueUpdated = React.useCallback(() => {
    // defaultBuffer.current === '__/__/____'
    // elementRef.current.value === '__/__/____'
    return props.unmask
        ? props.value !== getUnmaskedValue()
        : defaultBuffer.current !== elementRef.current.value &&
          elementRef.current.value !== props.value;
}, [props.unmask, props.value, getUnmaskedValue]);
useUpdateEffect(() => {
    if (isValueUpdated()) {
        updateValue();
    }
}, [isValueUpdated]);

Fix

  • Changed the condition to use ObjectUtils.isEmpty(props.value) so that empty string ('') is also considered an empty value:
const updateValue = (allow) => {
    let pos;

    if (elementRef.current) {
        if (ObjectUtils.isEmpty(props.value)) {
            elementRef.current.value = '';
        } else {
            // ...
        }
    }
};

Test

Sample Code 
import { InputMask } from '@/components/lib/inputmask/InputMask';
import { useState } from 'react';

export function BasicDoc(props) {
    const [value, setValue] = useState('');
    return (
        <main>
            <h1>Playground</h1>
            <button onClick={() => setValue('01/01/2025')}>Set Value</button>
            <InputMask value={value} mask="99/99/9999" onChange={(e) => setValue(e.target.value)} />
            <p>{value}</p>
        </main>
    );
}

Before: When clicking the button to update props.value, the new value is not applied to the InputMask component immediately. It only reflects after focusing the input manually.

2025-04-13.5.08.24.mov

After: The updated props.value is now immediately applied to the InputMask component when the button is clicked

2025-04-13.5.07.38.mov

@vercel
Copy link

vercel bot commented Apr 13, 2025

Deployment failed with the following error:

Creating the Deployment Timed Out.

@melloware melloware merged commit 4f0edd9 into primefaces:master Apr 13, 2025
3 of 4 checks passed
@KumJungMin KumJungMin deleted the fix/issue-7851 branch April 13, 2025 13:41
@KumJungMin KumJungMin mentioned this pull request Dec 28, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@melloware melloware melloware approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

InputMask: Value not displayed when set directly in state

2 participants

@KumJungMin @melloware