@skyux/ag-grid 11.32.0 → 11.34.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1281,20 +1281,23 @@ class SkyAgGridCellEditorAutocompleteComponent {
1281
1281
  this.skyComponentProperties = this.#params.skyComponentProperties || {};
1282
1282
  }
1283
1283
  afterGuiAttached() {
1284
- if (this.input) {
1285
- this.input.nativeElement.focus();
1286
- if (this.#triggerType === SkyAgGridCellEditorInitialAction.Replace) {
1287
- const charPress = this.#params?.eventKey;
1288
- this.input.nativeElement.select();
1289
- this.input.nativeElement.setRangeText(charPress);
1290
- // Ensure the cursor is at the end of the text.
1291
- this.input.nativeElement.setSelectionRange(charPress.length, charPress.length);
1292
- this.input.nativeElement.dispatchEvent(new Event('input'));
1293
- }
1294
- if (this.#triggerType === SkyAgGridCellEditorInitialAction.Highlighted) {
1295
- this.input.nativeElement.select();
1284
+ // AG Grid sets focus to the cell via setTimeout, and this queues the input to focus after that.
1285
+ setTimeout(() => {
1286
+ if (this.input) {
1287
+ this.input.nativeElement.focus();
1288
+ if (this.#triggerType === SkyAgGridCellEditorInitialAction.Replace) {
1289
+ const charPress = this.#params?.eventKey;
1290
+ this.input.nativeElement.select();
1291
+ this.input.nativeElement.setRangeText(charPress);
1292
+ // Ensure the cursor is at the end of the text.
1293
+ this.input.nativeElement.setSelectionRange(charPress.length, charPress.length);
1294
+ this.input.nativeElement.dispatchEvent(new Event('input'));
1295
+ }
1296
+ if (this.#triggerType === SkyAgGridCellEditorInitialAction.Highlighted) {
1297
+ this.input.nativeElement.select();
1298
+ }
1296
1299
  }
1297
- }
1300
+ });
1298
1301
  }
1299
1302
  getValue() {
1300
1303
  const val = this.editorForm.get('selection')?.value;
@@ -1390,33 +1393,36 @@ class SkyAgGridCellEditorCurrencyComponent {
1390
1393
  * afterGuiAttached is called by agGrid after the editor is rendered in the DOM. Once it is attached the editor is ready to be focused on.
1391
1394
  */
1392
1395
  afterGuiAttached() {
1393
- this.input?.nativeElement.focus();
1394
- // This setup is in `afterGuiAttached` due to the lifecycle of autonumeric which will highlight the initial value if it is in place when it renders.
1395
- // Since we don't want that, we set the initial value after autonumeric initializes.
1396
- this.#triggerType = SkyAgGridCellEditorUtils.getEditorInitialAction(this.params);
1397
- const control = this.currency;
1398
- if (control) {
1399
- switch (this.#triggerType) {
1400
- case SkyAgGridCellEditorInitialAction.Delete:
1401
- control.setValue(undefined);
1402
- break;
1403
- case SkyAgGridCellEditorInitialAction.Replace:
1404
- control.setValue(parseFloat(String(this.params?.eventKey)) || undefined);
1405
- break;
1406
- case SkyAgGridCellEditorInitialAction.Highlighted:
1407
- case SkyAgGridCellEditorInitialAction.Untouched:
1408
- default:
1409
- control.setValue(parseFloat(String(this.params?.value)));
1410
- break;
1396
+ // AG Grid sets focus to the cell via setTimeout, and this queues the input to focus after that.
1397
+ setTimeout(() => {
1398
+ this.input?.nativeElement.focus();
1399
+ // This setup is in `afterGuiAttached` due to the lifecycle of autonumeric which will highlight the initial value if it is in place when it renders.
1400
+ // Since we don't want that, we set the initial value after autonumeric initializes.
1401
+ this.#triggerType = SkyAgGridCellEditorUtils.getEditorInitialAction(this.params);
1402
+ const control = this.currency;
1403
+ if (control) {
1404
+ switch (this.#triggerType) {
1405
+ case SkyAgGridCellEditorInitialAction.Delete:
1406
+ control.setValue(undefined);
1407
+ break;
1408
+ case SkyAgGridCellEditorInitialAction.Replace:
1409
+ control.setValue(parseFloat(String(this.params?.eventKey)) || undefined);
1410
+ break;
1411
+ case SkyAgGridCellEditorInitialAction.Highlighted:
1412
+ case SkyAgGridCellEditorInitialAction.Untouched:
1413
+ default:
1414
+ control.setValue(parseFloat(String(this.params?.value)));
1415
+ break;
1416
+ }
1411
1417
  }
1412
- }
1413
- this.#changeDetector.markForCheck();
1414
- if (this.#triggerType === SkyAgGridCellEditorInitialAction.Highlighted &&
1415
- (this.params?.value ?? '') !== '') {
1416
- this.input?.nativeElement.select();
1417
- }
1418
- // When the cell is initialized with the Enter key, we need to suppress the first `onPressEnter`.
1419
- this.#initialized = this.params?.eventKey !== 'Enter';
1418
+ this.#changeDetector.markForCheck();
1419
+ if (this.#triggerType === SkyAgGridCellEditorInitialAction.Highlighted &&
1420
+ (this.params?.value ?? '') !== '') {
1421
+ this.input?.nativeElement.select();
1422
+ }
1423
+ // When the cell is initialized with the Enter key, we need to suppress the first `onPressEnter`.
1424
+ this.#initialized = this.params?.eventKey !== 'Enter';
1425
+ });
1420
1426
  }
1421
1427
  /**
1422
1428
  * getValue is called by agGrid when editing is stopped to get the new value of the cell.
@@ -1559,29 +1565,32 @@ class SkyAgGridCellEditorDatepickerComponent extends PopupComponent {
1559
1565
  * afterGuiAttached is called by agGrid after the editor is rendered in the DOM. Once it is attached the editor is ready to be focused on.
1560
1566
  */
1561
1567
  afterGuiAttached() {
1562
- const datepickerInputEl = this.datepickerInput?.nativeElement;
1563
- if (datepickerInputEl) {
1564
- datepickerInputEl.focus();
1565
- // programmatically set the value of in the input; however, do not do this via the form control so that the value is not formatted when editing starts.
1566
- // Watch for the first blur and fire a 'change' event as programmatic changes won't queue a change event, but we need to do this so that formatting happens if the user tabs to the calendar button.
1567
- if (this.#triggerType === SkyAgGridCellEditorInitialAction.Replace) {
1568
- fromEvent(datepickerInputEl, 'blur')
1569
- .pipe(first())
1570
- .subscribe(() => {
1571
- datepickerInputEl.dispatchEvent(new Event('change'));
1572
- });
1573
- datepickerInputEl.select();
1574
- const charPress = this.#params?.eventKey;
1575
- if (charPress) {
1576
- datepickerInputEl.setRangeText(charPress);
1577
- // Ensure the cursor is at the end of the text.
1578
- datepickerInputEl.setSelectionRange(charPress.length, charPress.length);
1568
+ // AG Grid sets focus to the cell via setTimeout, and this queues the input to focus after that.
1569
+ setTimeout(() => {
1570
+ const datepickerInputEl = this.datepickerInput?.nativeElement;
1571
+ if (datepickerInputEl) {
1572
+ datepickerInputEl.focus();
1573
+ // programmatically set the value of in the input; however, do not do this via the form control so that the value is not formatted when editing starts.
1574
+ // Watch for the first blur and fire a 'change' event as programmatic changes won't queue a change event, but we need to do this so that formatting happens if the user tabs to the calendar button.
1575
+ if (this.#triggerType === SkyAgGridCellEditorInitialAction.Replace) {
1576
+ fromEvent(datepickerInputEl, 'blur')
1577
+ .pipe(first())
1578
+ .subscribe(() => {
1579
+ datepickerInputEl.dispatchEvent(new Event('change'));
1580
+ });
1581
+ datepickerInputEl.select();
1582
+ const charPress = this.#params?.eventKey;
1583
+ if (charPress) {
1584
+ datepickerInputEl.setRangeText(charPress);
1585
+ // Ensure the cursor is at the end of the text.
1586
+ datepickerInputEl.setSelectionRange(charPress.length, charPress.length);
1587
+ }
1588
+ }
1589
+ if (this.#triggerType === SkyAgGridCellEditorInitialAction.Highlighted) {
1590
+ datepickerInputEl.select();
1579
1591
  }
1580
1592
  }
1581
- if (this.#triggerType === SkyAgGridCellEditorInitialAction.Highlighted) {
1582
- datepickerInputEl.select();
1583
- }
1584
- }
1593
+ });
1585
1594
  }
1586
1595
  /**
1587
1596
  * getValue is called by agGrid when editing is stopped to get the new value of the cell.
@@ -1947,12 +1956,15 @@ class SkyAgGridCellEditorTextComponent {
1947
1956
  * afterGuiAttached is called by agGrid after the editor is rendered in the DOM. Once it is attached the editor is ready to be focused on.
1948
1957
  */
1949
1958
  afterGuiAttached() {
1950
- if (this.input) {
1951
- this.input.nativeElement.focus();
1952
- if (this.#triggerType === SkyAgGridCellEditorInitialAction.Highlighted) {
1953
- this.input.nativeElement.select();
1959
+ // AG Grid sets focus to the cell via setTimeout, and this queues the input to focus after that.
1960
+ setTimeout(() => {
1961
+ if (this.input) {
1962
+ this.input.nativeElement.focus();
1963
+ if (this.#triggerType === SkyAgGridCellEditorInitialAction.Highlighted) {
1964
+ this.input.nativeElement.select();
1965
+ }
1954
1966
  }
1955
- }
1967
+ });
1956
1968
  }
1957
1969
  /**
1958
1970
  * getValue is called by agGrid when editing is stopped to get the new value of the cell.