Skip to content

Commit 366bcf7

Browse files
LipataLipata
authored
Merge pull request #9498 from IgniteUI/vslavov/input-group-disabled
fix(input): hide `disabled` property on input-group, #9339
2 parents 9f667f9 + 347a40e commit 366bcf7

File tree

9 files changed

+254
-17
lines changed

9 files changed

+254
-17
lines changed

‎.vscode/launch.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
55
"version": "0.2.0",
66
"configurations": [
7+
78
{
89
"type": "node",
910
"request": "launch",
@@ -12,7 +13,7 @@
1213
"-r",
1314
"ts-node/register",
1415
"./node_modules/jasmine/bin/jasmine.js",
15-
"./projects/igniteui-angular/migrations/common/UpdateChanges.spec.ts"
16+
"./projects/igniteui-angular/migrations/**/*.spec.ts"
1617
],
1718
"env": {
1819
"TS_NODE_PROJECT": "projects/igniteui-angular/migrations/tsconfig.json"

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,8 @@ All notable changes for each version of this project will be documented in this
5959
- `onGridCreated` -> `gridCreated`
6060
- `onGridInitialized` -> `gridInitialized`
6161
- `onDataPreLoad` -> `dataPreLoad`
62+
- `IgxInputGroupComponent`
63+
- **Breaking Change** - `disabled` property removed. Use the underlying `IgxInputDirective.disabled` to control the disabled state of the input group. Please make sure to update via `ng update` to migrate an usage of `disabled` in your template files. Please make sure to check out the [update guide](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/update-guide#from-111x-to-120x).
6264

6365
- `IgxDateTimeEditor`
6466
- **Feature** - `value` accepts ISO 8601 string format.

‎projects/igniteui-angular/migrations/common/util.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,8 @@ export const getSourceOffset = (element: Element): SourceOffset => {
193193
const { startSourceSpan, endSourceSpan } = element;
194194
return {
195195
startTag: { start: startSourceSpan.start.offset, end: startSourceSpan.end.offset },
196-
endTag: { start: endSourceSpan.start.offset, end: endSourceSpan.end.offset },
196+
// V.S. May 11th, 2021: Tag could be self-closing
197+
endTag: { start: endSourceSpan?.start.offset, end: endSourceSpan?.end.offset },
197198
file: {
198199
content: startSourceSpan.start.file.content,
199200
url: startSourceSpan.start.file.url

‎projects/igniteui-angular/migrations/update-12_0_0/changes/inputs.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,14 @@
264264
"selector": "igx-date-range-picker",
265265
"type": "component"
266266
}
267+
},
268+
{
269+
"name": "disabled",
270+
"remove": true,
271+
"owner": {
272+
"selector": "igx-input-group",
273+
"type": "component"
274+
}
267275
}
268276
]
269277
}

‎projects/igniteui-angular/migrations/update-12_0_0/index.spec.ts‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1675,4 +1675,181 @@ export class SimpleComponent {
16751675
)
16761676
).toEqual(expectedContent);
16771677
});
1678+
1679+
it('Should move input-group disabled property to input child', async () => {
1680+
appTree.create(
1681+
`/testSrc/appPrefix/component/test.component.html`,
1682+
`
1683+
<igx-input-group [disabled]="true">
1684+
<input igxInput [(ngModel)]="name">
1685+
</igx-input-group>
1686+
`
1687+
);
1688+
1689+
const tree = await schematicRunner
1690+
.runSchematicAsync(migrationName, {}, appTree)
1691+
.toPromise();
1692+
1693+
expect(
1694+
tree.readContent('/testSrc/appPrefix/component/test.component.html')
1695+
).toEqual(
1696+
`
1697+
<igx-input-group>
1698+
<input igxInput [(ngModel)]="name" [disabled]="true">
1699+
</igx-input-group>
1700+
`
1701+
);
1702+
});
1703+
1704+
it('Should move input-group disabled property to input child', async () => {
1705+
appTree.create(
1706+
`/testSrc/appPrefix/component/test.component.html`,
1707+
`
1708+
<igx-input-group [disabled]="true">
1709+
<input igxInput [(ngModel)]="name">
1710+
</igx-input-group>
1711+
`
1712+
);
1713+
1714+
const tree = await schematicRunner
1715+
.runSchematicAsync(migrationName, {}, appTree)
1716+
.toPromise();
1717+
1718+
expect(
1719+
tree.readContent('/testSrc/appPrefix/component/test.component.html')
1720+
).toEqual(
1721+
`
1722+
<igx-input-group>
1723+
<input igxInput [(ngModel)]="name" [disabled]="true">
1724+
</igx-input-group>
1725+
`
1726+
);
1727+
});
1728+
1729+
it('Should move input group disabled property w/ XHTML syntax closing', async () => {
1730+
appTree.create(
1731+
`/testSrc/appPrefix/component/test.component.html`,
1732+
`
1733+
<igx-input-group [disabled]="true">
1734+
<input igxInput [(ngModel)]="name"/>
1735+
</igx-input-group>
1736+
`
1737+
);
1738+
1739+
const tree = await schematicRunner
1740+
.runSchematicAsync(migrationName, {}, appTree)
1741+
.toPromise();
1742+
1743+
expect(
1744+
tree.readContent('/testSrc/appPrefix/component/test.component.html')
1745+
).toEqual(
1746+
`
1747+
<igx-input-group>
1748+
<input igxInput [(ngModel)]="name" [disabled]="true"/>
1749+
</igx-input-group>
1750+
`
1751+
);
1752+
});
1753+
1754+
it('Should only move input-group disabled to igxInput directive', async () => {
1755+
appTree.create(
1756+
`/testSrc/appPrefix/component/test.component.html`,
1757+
`
1758+
<igx-input-group [disabled]="true">
1759+
<input [(ngModel)]="name">
1760+
</igx-input-group>
1761+
`
1762+
);
1763+
1764+
const tree = await schematicRunner
1765+
.runSchematicAsync(migrationName, {}, appTree)
1766+
.toPromise();
1767+
1768+
expect(
1769+
tree.readContent('/testSrc/appPrefix/component/test.component.html')
1770+
).toEqual(
1771+
`
1772+
<igx-input-group>
1773+
<input [(ngModel)]="name">
1774+
</igx-input-group>
1775+
`
1776+
);
1777+
});
1778+
1779+
it('Should move input-group disabled string values to underlying igxInput', async () => {
1780+
appTree.create(
1781+
`/testSrc/appPrefix/component/test.component.html`,
1782+
`
1783+
<igx-input-group disabled="true">
1784+
<input igxInput [(ngModel)]="name">
1785+
</igx-input-group>
1786+
`
1787+
);
1788+
1789+
const tree = await schematicRunner
1790+
.runSchematicAsync(migrationName, {}, appTree)
1791+
.toPromise();
1792+
1793+
expect(
1794+
tree.readContent('/testSrc/appPrefix/component/test.component.html')
1795+
).toEqual(
1796+
`
1797+
<igx-input-group>
1798+
<input igxInput [(ngModel)]="name" disabled="true">
1799+
</igx-input-group>
1800+
`
1801+
);
1802+
});
1803+
1804+
it('Should move disabled attribute w/ no value to igxInput', async () => {
1805+
appTree.create(
1806+
`/testSrc/appPrefix/component/test.component.html`,
1807+
`
1808+
<igx-input-group disabled>
1809+
<input igxInput [(ngModel)]="name">
1810+
</igx-input-group>
1811+
`
1812+
);
1813+
1814+
const tree = await schematicRunner
1815+
.runSchematicAsync(migrationName, {}, appTree)
1816+
.toPromise();
1817+
// this is the expected output
1818+
// putting just the disabled attribute on an igx-input-group is an invalid scenario
1819+
expect(
1820+
tree.readContent('/testSrc/appPrefix/component/test.component.html')
1821+
).toEqual(
1822+
`
1823+
<igx-input-group disabled>
1824+
<input igxInput [(ngModel)]="name" disabled>
1825+
</igx-input-group>
1826+
`
1827+
);
1828+
});
1829+
1830+
it('Should not add duplicate disabled to igxInput when moving the property from input-group', async () => {
1831+
appTree.create(
1832+
`/testSrc/appPrefix/component/test.component.html`,
1833+
`
1834+
<igx-input-group [disabled]="true">
1835+
<input igxInput [(ngModel)]="name" disabled>
1836+
</igx-input-group>
1837+
`
1838+
);
1839+
1840+
const tree = await schematicRunner
1841+
.runSchematicAsync(migrationName, {}, appTree)
1842+
.toPromise();
1843+
// this is the expected output
1844+
// putting just the disabled attribute on an igx-input-group is an invalid scenario
1845+
expect(
1846+
tree.readContent('/testSrc/appPrefix/component/test.component.html')
1847+
).toEqual(
1848+
`
1849+
<igx-input-group>
1850+
<input igxInput [(ngModel)]="name" disabled>
1851+
</igx-input-group>
1852+
`
1853+
);
1854+
});
16781855
});

‎projects/igniteui-angular/migrations/update-12_0_0/index.ts‎

Lines changed: 48 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,17 +38,17 @@ export default (): Rule => (host: Tree, context: SchematicContext) => {
3838
COMPONENT: 'igx-date-picker',
3939
TEMPLATE_DIRECTIVE: 'igxDatePickerTemplate',
4040
TEMPLATE_WARN_MSG:
41-
`\n<!-- igxDatePickerTemplate has been removed.
41+
`\n<!-- igxDatePickerTemplate has been removed.
4242
Label, prefix, suffix and hint can now be projected directly.
4343
See https://www.infragistics.com/products/ignite-ui-angular/angular/components/date-picker -->\n`
44-
}, {
44+
}, {
4545
COMPONENT: 'igx-time-picker',
4646
TEMPLATE_DIRECTIVE: 'igxTimePickerTemplate',
4747
TEMPLATE_WARN_MSG:
48-
`\n<!-- igxTimePickerTemplate has been removed.
48+
`\n<!-- igxTimePickerTemplate has been removed.
4949
Label, prefix, suffix and hint can now be projected directly.
5050
See https://www.infragistics.com/products/ignite-ui-angular/angular/components/time-picker -->\n`
51-
}];
51+
}];
5252
const EDITORS_MODE = ['[mode]', 'mode'];
5353
const EDITORS_LABEL = ['[label]', 'label'];
5454
const EDITORS_LABEL_VISIBILITY = ['[labelVisibility]', 'labelVisibility'];
@@ -468,6 +468,50 @@ See https://www.infragistics.com/products/ignite-ui-angular/angular/components/t
468468
}
469469
}
470470

471+
// input group disabled property
472+
const INPUT_GROUP_CHANGES = {
473+
GROUP_TAG: 'igx-input-group',
474+
ATTRIBUTES: ['[disabled]', 'disabled'],
475+
INPUT_TAG: 'input',
476+
DIRECTIVE: 'igxInput'
477+
};
478+
479+
for (const path of htmlFiles) {
480+
const inputGroups = findElementNodes(parseFile(host, path), INPUT_GROUP_CHANGES.GROUP_TAG);
481+
inputGroups.forEach((el) => {
482+
const parentEl = (el as Element);
483+
if (hasAttribute(parentEl, INPUT_GROUP_CHANGES.ATTRIBUTES)) {
484+
const inputChildren = findElementNodes([el], INPUT_GROUP_CHANGES.INPUT_TAG)
485+
.reduce((prev, curr) => prev.concat(curr), [])
486+
.filter(template => hasAttribute(template as Element, INPUT_GROUP_CHANGES.DIRECTIVE));
487+
INPUT_GROUP_CHANGES.ATTRIBUTES.forEach((a: string) => {
488+
const attr = getAttribute(parentEl, a)[0];
489+
if (attr) {
490+
inputChildren.forEach((node: Element) => {
491+
if (!hasAttribute(node, INPUT_GROUP_CHANGES.ATTRIBUTES)) {
492+
const { startTag, file } = getSourceOffset(node as Element);
493+
// input is self-closing, so the element === startTag
494+
const repTxt = file.content.substring(startTag.start, startTag.end);
495+
const matches = repTxt.match(/\/?>/g);
496+
// should always be only 1 match
497+
const lastIndex = repTxt.indexOf(matches[0]);
498+
let property = `${attr.name}`;
499+
if (attr.name === INPUT_GROUP_CHANGES.ATTRIBUTES[0] || attr.value) {
500+
property += `="${attr.value}"`;
501+
}
502+
const addedAttr =
503+
`${repTxt.substring(0, lastIndex)} ${property}${repTxt.substring(lastIndex)}`;
504+
addChange(file.url, new FileChange(startTag.start, addedAttr, repTxt, 'replace'));
505+
}
506+
});
507+
}
508+
});
509+
}
510+
});
511+
applyChanges();
512+
changes.clear();
513+
}
514+
471515
// Apply all selector and input changes
472516
update.applyChanges();
473517
};

‎projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ <h6 class="igx-filter-empty__title">
224224
</igx-time-picker>
225225

226226
<igx-input-group #inputGroup type="box" *ngIf="selectedColumn && selectedColumn.dataType === 'dateTime'"
227-
type="box" [disabled]="!selectedColumn || !selectedCondition || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)"
227+
type="box"
228228
[displayDensity]="'compact'">
229229
<input #input igxInput tabindex="0"
230230
[placeholder]="grid.resourceStrings.igx_grid_filter_row_date_placeholder"

‎projects/igniteui-angular/src/lib/input-group/input-group.component.spec.ts‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -353,8 +353,8 @@ const testInputGroupType = (type: IgxInputGroupType, component: IgxInputGroupCom
353353
};
354354

355355
@Component({
356-
template: `<igx-input-group #igxInputGroup [disabled]="disabled">
357-
<input igxInput />
356+
template: `<igx-input-group #igxInputGroup>
357+
<input igxInput [disabled]="disabled"/>
358358
</igx-input-group>`
359359
})
360360
class InputGroupDisabledComponent {
@@ -368,22 +368,25 @@ class InputGroupDisabledComponent {
368368
}
369369

370370
@Component({
371-
template: `<igx-input-group #igxInputGroup disabled>
372-
<input igxInput />
371+
template: `<igx-input-group #igxInputGroup>
372+
<input igxInput disabled/>
373373
</igx-input-group>`
374374
})
375375
class InputGroupDisabledWithoutValueComponent {
376376
@ViewChild('igxInputGroup')
377377
public igxInputGroup: IgxInputGroupComponent;
378378

379+
@ViewChild(IgxInputDirective)
380+
public inputDir: IgxInputDirective;
381+
379382
public changeDisableState() {
380-
this.igxInputGroup.disabled = !this.igxInputGroup.disabled;
383+
this.inputDir.disabled = !this.inputDir.disabled;
381384
}
382385
}
383386

384387
@Component({
385-
template: `<igx-input-group #igxInputGroup [disabled]="disabled">
386-
<input igxInput />
388+
template: `<igx-input-group #igxInputGroup>
389+
<input igxInput [disabled]="disabled"/>
387390
</igx-input-group>`
388391
})
389392
class InputGroupDisabledByDefaultComponent {

‎projects/igniteui-angular/src/lib/input-group/input-group.component.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -100,13 +100,14 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp
100100
public isFocused = false;
101101

102102
/**
103-
* An @Input property that disables the `IgxInputGroupComponent`.
103+
* @hidden @internal
104+
* When truthy, disables the `IgxInputGroupComponent`.
105+
* Controlled by the underlying `IgxInputDirective`.
104106
* ```html
105-
* <igx-input-group [disabled]="'true'"></igx-input-group>
107+
* <igx-input-group [disabled]="true"></igx-input-group>
106108
* ```
107109
*/
108110
@HostBinding('class.igx-input-group--disabled')
109-
@Input()
110111
public disabled = false;
111112

112113
/**

0 commit comments

Comments
 (0)