Focus on input inside hidden div

Question

consider the rails view bellow:

<div
    data-controller='manager'
    data-manager-target='inputcontainer'
>
  <input
      class='hidden'
      type='text'
      data-manager-target='input'
  >
</div>
<div
    data-manager-target='label'
    data-action='dblclick->manager#show'
>
  double click to show input
</div>

and this code in the manager_controller.js:

show() {
  this.inputcontainerTarget.classList.remove('hidden');
  this.inputTarget.focus();
}

When I double click the second div to show the first one I get the error Uncaught TypeError: self.inputTarget is undefined.

I understand why it's happening but I'm struggling to find a way to make it work.

Does anybody know how can I make it work?

This is a Ruby on Rails 7.1 app and I'm using Stimulus to wire up the front-end and Tailwind for styling.

Answer 1

<div data-controller="manager">
  <input class="hidden" type="text" data-manager-target="input">

  <!-- this needs to be inside the `data-controller` div -->
  <div data-action="dblclick->manager#show">
    double click to show input
  </div>
</div>

// app/javascript/controllers/manager_controller.js

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="manager"
export default class extends Controller {
  // NOTE: you have to declare your targets
  //       this is for `data-manager-target="input"`
  static targets = ["input"];

  show() {
    this.inputTarget.classList.remove("hidden");
    this.inputTarget.focus();
  }
}

Note, there is no need for data-manager-target="inputcontainer" on data-controller="manager" element, you can refer to controller element itself with this.element.

https://stimulus.hotwired.dev/reference/targets