Template inheritance - ember 5.12

Questions
1

I recently updated my app from ember 3.16 to ember 5.12 and have started seeing a weird issue. My component has started using template from the parent component is it extending.

I am using co-located template in my app

password-with-generator
       |
       ---- component.js
       ---- template.hbs

And the code is as follows component.js

import {computed, get, set} from '@ember/object'
import {alias} from '@ember/object/computed'
import PasswordInput from 'internal/components/inputs/password'
import _ from 'lodash'
import layout from './template'

export default PasswordInput.extend({

  layout,

  showGeneratePassword: computed('disabled', 'options.policyRules',
    // logic
    ).readOnly(),

  init () {
    this._super(...arguments)

    set(this, 'layout', layout)  // have tried without it also, have also tried this.layout = layout
  },

  actions: {
    generatePassword () {
     //logic
    }
  }
})

template.hbs

{{log 'my template'}}
<div>My template</div>

But after upgrading to ember 5.12, instead of picking this template, template from PasswordInput is used (which is also using classic syntax and colocated tempalate, index.js and index.hbs)

I have tried removing layout from component and couple other things, but nothing works with new ember. I can’t update it to use glimmer component as I still need PasswordInput’s functionality which I can’t update.

Is there any way to achieve old functionality?

Note: I tried renaming to password-with-generator.js/hbs too, but that ends up with conflicting same names error (probably, hbs is compiled with same-name.js file.

1 Like