IonInput masking

@austin43 wrote:

Hello,

I’ve been trying to implement a phone number mask on IonInput. imask and each third party library I’ve tried requires the native element as a reference (IonInput as the reference element will not work), so I’ve been trying this:

const MaskedStyledInput = IMaskMixin(({ inputRef, ...props }) => {
	return (
		<IonInput
			{...props}
			ref={async el => {
				const element = el && (await el.getInputElement())
				return inputRef(element)
			}}
		/>
	)
})

This doesn’t seem to work as the element isn’t available until after the first render has already happened, thus passing an undefined element to imask. It works perfectly with <input />.

Is there a recommended way of doing input masking in ionic/react outside of third party libraries? Thanks in advance for any help.

Posts: 1

Participants: 1

Read full topic