Missing target element even with an if

1

I have a controller with a button to show the password

toggleShowPassword() {
    if(this.showPasswordTarget.checked) {
      this.passwordTarget.type="text"
      // The registrations controller is used on the login page and there is no password confirmation there
      if(this.passwordConfirmationTarget) {
        this.passwordConfirmationTarget.type="text"
      }
    } else {
      this.passwordTarget.type="password"
      if(this.passwordConfirmationTarget){
        this.passwordConfirmationTarget.type="password"
      }
    }
  }

The passwordConfigurationTarget is optional. On the login form there is not such target.

Despite this and error occurs:

application.js:250 Error invoking action "change->registrations#toggleShowPassword"

Error: Missing target element "registrations.passwordConfirmation"
    at Controller.get (target_properties.js:15)
    at Controller.toggleShowPassword (registrations_controller.js:43)
    at Binding.invokeWithEvent (binding.js:60)
    at Binding.handleEvent (binding.js:33)
    at EventListener.handleEvent (event_listener.js:40)

So I am checking for the target as mentioned in Optional Targets https://stimulusjs.org/reference/targets#optional-targets but there is an error.

2

Offf, saw it now. It should be this.hasPasswordConfigurationTarget

3

Isn’t it great when you spot your issue immediately after pressing Send!

Happens every time for me.

Walter

4

I guess it is the moment you stop looking at the problem for a couple of minutes, you distract yourself with Log in and create a post on the forum, you post, and… you now look with fresh eyes on the problem and you are … “how could I’ve missed this…”

5

Been there, done that.

More times than I want to admit