my cool twiddle yo

components.thing-to-focus\.hbs

<label style={{if @isFocused "background: green; color: white;"}}>
	{{@name}}
	<input id={{@name}} {{on "focus" @onFocusIn}}>
</label>

controllers.application\.js

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';

export default class ApplicationController extends Controller {
  fields = ['a', 'b', 'c'];

  @tracked focused = null;

  activate = (id) => {
    document.querySelector(`#${id}`).focus();
  }
  
  clear = () => {
    this.focused = null;
  }
}

helpers.eq\.js

import { helper } from '@ember/component/helper';

export default helper(function eq([a, b]/*, hash*/) {
  return a === b;
});

helpers.set\.js

import { helper } from '@ember/component/helper';
import { set } from '@ember/object';

export default helper(([obj, path, value]) => {
  return set(obj, path, value)
});

templates.application\.hbs

{{#each this.fields as |field|}}
	<button {{on "click" (fn this.activate field)}}>{{field}}</button>
{{/each}}

{{#each this.fields as |field|}}
  <ThingToFocus
  	@name={{field}}
    @isFocused={{eq this.focused field}}
    @onFocusIn={{set this "focused" field}}
  />
{{/each}}

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}