I am seeing something strange. I have a text box. It should accept 5 characters. I have an onInput handler.
On Safari, sometimes the input detected is not correct. It’s like it’s missing the last character. The event fires, but the event.target.value AND the $w(‘#mytextfield’).value are both wrong.
If I’ve typed in 1, the event.target.value and UI.value show nothing.
If I’ve typed in 10, the event.target.value and UI.value show 1.
This only happens sometimes. Other times, Safari appears to capture all of the input. I have not been able to determine when/why Safari sometimes captures all the input and sometimes does not. Reloading the page sometimes fixes it.
There are no errors in the console.
This code ALWAYS works in Chrome.
I am wondering if this is a bug, or if Safari somehow behaves differently in the onInput event. The fact that this only happens intermittently, though, tells me that it’s not an intended behavior. It’s like the event loop is sometimes one cycle behind reality.
Below is the relevant code:
If the text box in the UI contains the input 12345, the onInput handler shows that the event.target.value and also the $w(‘#textfield’).value are both 1234.
Because the code to process this request requires 5 characters, it never happens, because the input is limited to 5 characters, but somehow the event only sees 4.
export async function inventoryCodeTI_input(event) {
_log('INVENTORY CODE: INPUT KEYBOARD EVENT ' + event.target.value + ' VS UI ELEMENT VALUE: ' + $w('#inventoryCodeTI').value);
await _showLoadStatus('Input Keyboard Event: ' + event.target.value);
if (event.target.value.length === 5) {
_log('INVENTORY CODE: INPUT KEYBOARD EVENT LENGTH = 5. START LOADING INVENTORY ' + event.target.value)
Below are a couple of screenshots that show the problem.
Here is what the event looks like when I have typed in 1 into the text box. As you can see from the label “Input Keyboard Event:” and also from the console.log, the input.target.event and the UI.value contain no value.
Here is what the event looks like when I have typed in 10 into the text box. As you can see, the event.target.value and the UI.value contain 1
Here is what the event looks like when I have typed in 12345. As you can see, the event.target.value and the UI.value contain 1234
Next, after the input was set to 12345 (but the event.target.value and UI.value both showed 1234), I deleted the last character in the input, making it 1234. Now the event.target.value and UI.value shows the previous value (12345) and since that’s 5 characters, the inventory loading code runs.
And just to show that this is intermittent, I opened up a new Safari window and repeated the test. This time, the text input shows 123, the event.target.value and the UI.value also show 123.
I found another forum post that looks relevant. This person notes that Safari’s event handler seems to start on the second click, but there’s some compounding complexity in that the event handler is inside a repeater. Regardless of the repeater, this is similar to what I’m seeing.