Skip to content

Fix multi-text-groups: changed group to type & key to meta_id #209

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cairocoder01 merged 3 commits into from
Jul 14, 2026
Merged

Fix multi-text-groups: changed group to type & key to meta_id #209

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
197d9c9
Fix: changed group to type & key to meta_id
jlamanskygitt Jul 13, 2026
d7f24b9
Updated test & stories files
jlamanskygitt Jul 13, 2026
282063e
clean console statements
cairocoder01 Jul 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 17 additions & 18 deletions src/components/form/dt-multi-text-groups/dt-multi-text-groups.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,9 +138,9 @@ export class DtMultiTextGroups extends DtMultiText {
verified: false,
value: '',
tempKey: Date.now().toString(),
group: group.id,
type: group.id,
};
if (this.value[0]?.group) {
if (this.value[0]?.type) {
this.value = [...this.value, newValue];

} else {
Expand All @@ -161,7 +161,6 @@ export class DtMultiTextGroups extends DtMultiText {

_removeItem(e) {
const keyToRemove = e.currentTarget.dataset.key;
console.log(e.currentTarget);
if (keyToRemove) {
const event = new CustomEvent('change', {
bubbles: true,
Expand All @@ -179,9 +178,9 @@ export class DtMultiTextGroups extends DtMultiText {
.map(x => {
const item = { ...x };
// add `delete` prop to clicked item
if (x.key === keyToRemove || x.tempKey === keyToRemove) {
if (x.meta_id === keyToRemove || x.tempKey === keyToRemove) {
item.delete = true;
this.activeGroup = item.group;
this.activeGroup = item.type;
}
return item;
});
Expand Down Expand Up @@ -209,8 +208,8 @@ export class DtMultiTextGroups extends DtMultiText {

// update this item's value in the list
this.value = this.value.map(x => {
if (x.key === key || x.tempKey === key) {
this.activeGroup = x.group;
if (x.meta_id === key || x.tempKey === key) {
this.activeGroup = x.type;

return {
...x,
Expand Down Expand Up @@ -331,7 +330,7 @@ export class DtMultiTextGroups extends DtMultiText {
return html`
<div class="field-container">
<input
data-key="${item.key ?? item.tempKey}"
data-key="${item.meta_id ?? item.tempKey}"
tabindex="1"
name="${this.name}"
aria-label="${this.label}"
Expand All @@ -346,13 +345,13 @@ export class DtMultiTextGroups extends DtMultiText {
/>

${when(
(this.value[0]?.group) || (!this.groups && itemCount > 1),
(this.value[0]?.type) || (!this.groups && itemCount > 1),
() => html`
<button
class="input-addon btn-remove"
tabindex="1"
@click=${this._removeItem}
data-key="${item.key ?? item.tempKey}"
data-key="${item.meta_id ?? item.tempKey}"
?disabled=${this.disabled}
>
<dt-icon icon="mdi:close"></dt-icon>
Expand Down Expand Up @@ -397,10 +396,10 @@ export class DtMultiTextGroups extends DtMultiText {
for (const [i, item] of (this.value || []).entries()) {
if (item.delete && !this.isDeleting) {
this.isDeleting = true;
this.activeGroup = item.group;
this.activeGroup = item.type;
}
}
const remainingItemsPerGroup = this.groups.map(group => (this.value || []).filter(item => item.group === group.id && !item.delete).length);
const remainingItemsPerGroup = this.groups.map(group => (this.value || []).filter(item => item.type === group.id && !item.delete).length);
let itemsAbove = 0;
let itemsBelow = 0;
for (let i = remainingItemsPerGroup.length-1; i > groupIndex; i-=1) {
Expand All @@ -424,22 +423,22 @@ export class DtMultiTextGroups extends DtMultiText {
let itemCount = 0;
if (i > groupIndex) {
// add padding for each item, every item if we are deleting (icon shows at top element)
itemCount = (this.value || []).filter(item => item.group === group.id && !item.delete).length;
itemCount = (this.value || []).filter(item => item.type === group.id && !item.delete).length;

// if at least 1 item in group, we add for the group title as well, only if it's below our group
if (itemCount > 0) {
titleCount += 1;
}
} else if (i === groupIndex) {
itemCount = (this.value || []).filter(item => item.group === group.id && !item.delete).length-1;
itemCount = (this.value || []).filter(item => item.type === group.id && !item.delete).length-1;
if (this.isDeleting && itemCount === 0){
if (itemsAbove > 0) {
itemCount = itemsAbove-1;
} else if (itemsBelow > 0) {
titleCount -= 1;
}
} else {
itemCount = (this.value || []).filter(item => item.group === group.id && !item.delete).length-1;
itemCount = (this.value || []).filter(item => item.type === group.id && !item.delete).length-1;
}
}
pad += itemCount;
Expand Down Expand Up @@ -470,10 +469,10 @@ export class DtMultiTextGroups extends DtMultiText {
}

const firstIndex = this.value[0];
if (this.groups && (firstIndex && firstIndex.group)) {
if (this.groups && (firstIndex && firstIndex.type)) {
return this.groups.map(group => {
const groupItems = (this.value ?? []).filter(
x => !x.delete && x.group === group.id
x => !x.delete && x.type === group.id
);

if (groupItems.length > 0) {
Expand Down Expand Up @@ -588,7 +587,7 @@ export class DtMultiTextGroups extends DtMultiText {

<div class="readonly-options">
${repeat(
(this.value || []).filter(item => item.group === group.id),
(this.value || []).filter(item => item.type === group.id),
item => html`<div class="group-item">${item.value}</div>`
)}
</div>`
Expand Down
76 changes: 38 additions & 38 deletions src/components/form/dt-multi-text-groups/dt-multi-text-groups.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,18 +126,18 @@ export const EnteredValue = {
value: [
{
value: 'Lorem Ipsum',
key: 'comm_channel_1',
group: 'one',
meta_id: 'comm_channel_1',
type: 'one',
},
{
value: 'Lorem Ipsum 2',
key: 'comm_channel_2',
group: 'two',
meta_id: 'comm_channel_2',
type: 'two',
},
{
value: 'Lorem Ipsum 3',
key: 'comm_channel_3',
group: 'two',
meta_id: 'comm_channel_3',
type: 'two',
},
],
},
Expand All @@ -163,8 +163,8 @@ export const Disabled = {
value: [
{
value: 'Lorem Ipsum',
key: 'comm_channel_1',
group: 'one'
meta_id: 'comm_channel_1',
type: 'one'
},
],
}
Expand All @@ -180,18 +180,18 @@ export const ReadOnly = {
value: [
{
value: 'Lorem Ipsum',
key: 'comm_channel_1',
group: 'one'
meta_id: 'comm_channel_1',
type: 'one'
},
{
value: 'Lorem Ipsu2',
key: 'comm_channel_2',
group: 'two'
meta_id: 'comm_channel_2',
type: 'two'
},
{
value: 'Lorem Ipsum',
key: 'comm_channel_3',
group: 'two'
meta_id: 'comm_channel_3',
type: 'two'
}
],
}
Expand All @@ -208,18 +208,18 @@ export const ReadOnlyDisabled = {
value: [
{
value: 'Lorem Ipsum',
key: 'comm_channel_1',
group: 'one'
meta_id: 'comm_channel_1',
type: 'one'
},
{
value: 'Lorem Ipsum',
key: 'comm_channel_2',
group: 'two'
meta_id: 'comm_channel_2',
type: 'two'
},
{
value: 'Lorem Ipsum2',
key: 'comm_channel_3',
group: 'two'
meta_id: 'comm_channel_3',
type: 'two'
}
],
}
Expand All @@ -235,8 +235,8 @@ export const privateField = {
value: [
{
value: 'Lorem Ipsum',
key: 'comm_channel_1',
group: 'one'
meta_id: 'comm_channel_1',
type: 'one'
},
],
privateLabel: 'This is a custom tooltip',
Expand All @@ -252,8 +252,8 @@ export const Loading = {
value: [
{
value: '',
key: 'comm_channel_1',
group: 'one'
meta_id: 'comm_channel_1',
type: 'one'
},
],
loading: true,
Expand All @@ -269,8 +269,8 @@ export const Saved = {
value: [
{
value: '',
key: 'comm_channel_1',
group: 'one'
meta_id: 'comm_channel_1',
type: 'one'
},
],
saved: true,
Expand All @@ -286,8 +286,8 @@ export const Error = {
value: [
{
value: '',
key: 'comm_channel_1',
group: 'one'
meta_id: 'comm_channel_1',
type: 'one'
},
],
error: 'Custom error message',
Expand All @@ -303,8 +303,8 @@ export const ErrorSlot = {
value: [
{
value: '',
key: 'comm_channel_1',
group: 'one'
meta_id: 'comm_channel_1',
type: 'one'
},
],
error: '[Should show link here]',
Expand All @@ -322,8 +322,8 @@ export const BasicForm = {
value: [
{
value: '',
key: 'comm_channel_1',
group: 'one'
meta_id: 'comm_channel_1',
type: 'one'
},
],
},
Expand All @@ -339,8 +339,8 @@ export const Required = {
value: [
{
value: '',
key: 'comm_channel_1',
group: 'one'
meta_id: 'comm_channel_1',
type: 'one'
},
],
required: true,
Expand All @@ -356,8 +356,8 @@ export const requiredCustomMessage = {
value: [
{
value: '',
key: 'comm_channel_1',
group: 'one'
meta_id: 'comm_channel_1',
type: 'one'
},
],
required: true,
Expand All @@ -378,8 +378,8 @@ export const LocalizeRTL = {
value: [
{
value: 'راد أن يشع',
key: 'comm_channel_1',
group: 'one',
meta_id: 'comm_channel_1',
type: 'one',
},
],
},
Expand Down
Loading