Text in cell is not selected when cell enters edit mode

[wnvko]

Description

I have a grid with different types of cells, e.g. text, number, date and so on. What I need is when cell enters edit mode to either put the cursor at the start of the cell text or to select the entire text. To do so I set my columns like this:

<igx-column field="name" [igxTextSelection]="true"></igx-column>

Even with igxTextSelection set to true the content of the cell is not selected. This makes editing extremely difficult.

• igniteui-angular version: 14.0.5
• browser: all

Steps to reproduce

1. Select a cell in the grid.
2. Press F2
3. Press Tab

Result

When cell enters edit mode it is always put the cursor at the end of the cell text.

Expected result

When cell enters edit mode cursor should be put at the start of the cell or cell's text should be selected.

[hanastasov]

Do you expect that setting [igxTextSelection]="true" will make the content of the cell selected in edit mode? I looked at the code and documentation and code didn't make it clear to me what this directive does:

https://github.com/IgniteUI/igniteui-angular/blob/fa8c887b72fde85bb9ccb4a5e8b309b0083151ef/projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.ts#L49

Docs say: Determines whether the input element could be selected through the directive.. But Iooking at the code it does nothing - just setting a value to the selectionState property, used nowhere.

EDIT: Ok, it looks like that this directive will work only when set on the input itself:

So, having a template for editing should do the work, I guess.

[wnvko]

@hanastasov yes this will work with template. However this still does not work for date time columns as you do not have access to the igxDatePicker's input. Additionally creating a custom template for each column is too much. Looking at html input it is by default select the entire text in the input of focus. IMO save should happen in grid cells without template.

[hanastasov]

Sounds good to me to behave like this. Was just paying attention that maybe cannot be achieved using the TextSelection directive.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[hanastasov]

This can be achieved using a template currently, and the input in the template to be:

• wrapped in an igx-input-group parent element
• marked with igxInput directive
• marked with [igxTextSelection] directive, set to true

    <igx-column field="ProductName" header="ProductName" [dataType]="'string'">
      <ng-template igxCellEditor let-cell="cell">
        <igx-input-group>
          <input
            igxInput
            [igxTextSelection]="true"
            [igxFocus]="true"
            [(ngModel)]="cell.editValue"
          />
        </igx-input-group>
      </ng-template>
    </igx-column>

Checkout this stackblitz sample.

[wnvko]

Speaking of date type cell in your sample you are overriding the editor and have no calendar drop down, no date mask. Actually, you can enter whatever text you want as this is simply input. I know I can add igxDateTimeEditor directive to date column template. However, doing this and text is not selected when cell enters edit mode.

[hanastasov]

igxDateTimeEditor

That seems like a conflict between igxDateTimeEditor directive and igxTextSelection one.

[Svetloslav15]

In my opinion it will be better to directly select the content when we enter editMode, as most of the time when a user wants to edit something first they select everything, delete it and write the new one, which will be better approach than changing the position of the cursor to be at the beginning.