Missing methods

[SebastianStehle]

Hi,

it almost works, but I have two use cases that i cannot get working:

1. Focus manually
2. Clear the input

When I try to manipulate the component on the DOM level the component does not work properly. Any chance you can implement that?

[soywod]

Hi @SebastianStehle, When you say focus manually, you mean by ref? Indeed it misses a way to clear the field, I will fix that.

[SebastianStehle]

I have to ensure that the pin code always gets the focus back when you click outside of the input. it is for a kiosk app.

[soywod]

What I propose is to expose the field ref via forwardRef as HTMLInputElement[], which refers to the list of text inputs. This way you can trigger .focus() manually and clear the field. What do you think?

[SebastianStehle]

I was not expecting to get a result so fast and because this is a project for a customer I wanted to have a solution asap. So I built my own component. But I will probably get rid of it later.

What I did was to expose a Controller interface via on onInit event:

https://gist.github.com/SebastianStehle/2fb09a27852a2e536532a88d91ab06f0

[soywod]

I have a working solution, I should release it tomorrow. Thank you for your feedback!

[soywod]

I just push the solution and deployed it in the last version v0.3.0. Now you have access to the PIN field ref. Because the PIN field is a list of input, the ref is typed as HTMLInputElement[]. If you want to focus the 2nd input, you can do ref.current[1].focus(). To clear the code you can do ref.current.forEach(input => (input.value = "")).

[SebastianStehle]

Have you tested if this works? In my test the onCompleted event was not triggered anymore, because the DOM does not match to the component state.

[soywod]

@SebastianStehle in fact it's not related to my changes. The onComplete event is triggered only once - the first time the code is completed. So if you complete once the code and then reset all the values, it will not trigger again. I don't know if it's a correct behaviour.

[soywod]

I decided to trigger onComplete each time the code is completed. If you want to prevent the user to complete multiple times the code then just disable inputs on the first onComplete call. I pushed and published the v1.0.0. Thank you for your help!