isMessageBoxActive

components.my-component\.js

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class extends Component {
  
  @tracked messageContent = '';
  @tracked isFocused = false;
  
  get isMessageBoxActive() {
    return !!this.isFocused || !!this.messageContent;
  }
  
  toggle() {
    this.isFocused = !this.isFocused;
  }
}

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

modifiers.resize\.js

import { modifier } from 'ember-modifier';
import { assert } from '@ember/debug';

export default modifier(function sampleModifier(
  element,
) {
  alert('modifier init');

  const resize = ev => {
    alert('resize');
  };

  element.addEventListener('input', resize);

  return () => element.removeEventListener('input', resize);
});

templates.application\.hbs

<br>
<br>
{{my-component}}
<br>
<br>

templates.components.my-component\.hbs

<p>isMessageBoxActive: <strong>{{this.isMessageBoxActive}}</strong></p> 
<p>isFocused: <strong>{{this.isFocused}}</strong></p> 
<p>messageContent: <strong>'{{this.messageContent}}'</strong></p>
 
<button onclick={{action toggle}}>Toggle isFocused</button>

 <Textarea
  @value={{this.messageContent}}
  {{resize this.isMessageBoxActive}}
/>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": true,
    "_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",
    "@ember/render-modifiers": "1.0.2",
    "ember-modifier": "1.0.3"
  }
}