diff --git a/ui-v2/app/components/tabular-details.js b/ui-v2/app/components/tabular-details.js index fd569b860..50d70b796 100644 --- a/ui-v2/app/components/tabular-details.js +++ b/ui-v2/app/components/tabular-details.js @@ -1,11 +1,20 @@ import Component from '@ember/component'; import SlotsMixin from 'block-slots'; import { inject as service } from '@ember/service'; -import { get } from '@ember/object'; +import { get, set } from '@ember/object'; +import { subscribe } from 'consul-ui/utils/computed/purify'; +let uid = 0; export default Component.extend(SlotsMixin, { dom: service('dom'), onchange: function() {}, + init: function() { + this._super(...arguments); + set(this, 'uid', uid++); + }, + inputId: subscribe('name', 'uid', function(name = 'name') { + return `tabular-details-${name}-toggle-${uid}_`; + }), actions: { click: function(e) { get(this, 'dom').clickFirstAnchor(e); diff --git a/ui-v2/app/templates/components/tabular-details.hbs b/ui-v2/app/templates/components/tabular-details.hbs index 556e49705..5e9f928ab 100644 --- a/ui-v2/app/templates/components/tabular-details.hbs +++ b/ui-v2/app/templates/components/tabular-details.hbs @@ -11,14 +11,14 @@ {{#yield-slot 'row'}}{{yield item index}}{{/yield-slot}} - + - +
- +
{{#yield-slot 'details'}} {{yield item index}}