React textfield onChange updates only after unfocusing

Photoshop UXP Plugin API
, ,
1

Greetings everyone,

I am in the middle of building my simple Photoshop plugin. I have come across an issue I am sure other people have encountered before. onChange not working on spectrum elements. I looked around the forums and turns out I need a wrapper. I don’t remember the name right now, but someone suggested to use wc-react and more specifically wrapWC from it.

It does work, however, unlike in normal react apps where if I type something into the input, it automatically updates, here it seems to only send the event when I finish writing and unfocus the element instead of on each key stroke. Any ideas how to fix this/what could be causing this?

Here is the necessary code (not the whole code, just the parts that matter):

    const NameInput = wrapWc('sp-textfield');


    const handleInputChange = (inputName) => {
        console.log(inputName);
        try {
            const originalNameAppend = inputName.replaceAll("%og%", exampleFilename)
            const fileNumberAppend = originalNameAppend.replaceAll("%num%", String(exampleFileNumber))
            const leadingZerosPattern = /%a\d+%/
            let leadingZerosAppend = fileNumberAppend
            while (leadingZerosPattern.test(leadingZerosAppend)) {
                const match = leadingZerosPattern.exec(leadingZerosAppend)['0']
                const padLength = parseInt(match.substring(2, match.length - 1))
                const paddedNum = addLeadingZeros(exampleFileNumber, padLength)
                leadingZerosAppend = leadingZerosAppend.replaceAll(match, paddedNum)
            }

            setShownName(leadingZerosAppend)
            dispatch(setTemplate(inputName))
        } catch (e) {
            console.log(e)
        }
    }

    return <div id={"naming"}>
        {/*Heading*/}
        <Section sectionName={"Naming"} isTransparent={true}>
            {/*
                Example filename: FileName001
                Command outline = %command% <br/>
                Original name = og <br/>
                Page number = num <br/>
                Add leading zeros = an | where n represents the amount of zeros
            */}

            <sp-heading size={"XXS"}>{shownName.length < 1 ? "FileName001" : shownName}</sp-heading>
            <NameInput onChange={e => handleInputChange(e.target.value)}></NameInput>
            <sp-action-button class={"button-100"}>Guide</sp-action-button>
        </Section>
</div>