Skip to content
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

Fix search highlight after entering edit mode - 7.1.x #3645

Merged
merged 4 commits into from
Jan 17, 2019
+19 −17
Merged

Fix search highlight after entering edit mode - 7.1.x #3645

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4af9ebf
test(search): fixing search tests #3637
DiyanDimitrov Jan 17, 2019
c6e333b
fix(search): fix converting nodeLists to array #3637
DiyanDimitrov Jan 17, 2019
1a873a0
fix(search): observe highlight when changing inEditMode #3637
DiyanDimitrov Jan 17, 2019
5b41712
fix(search): renaming private member #3637
DiyanDimitrov Jan 17, 2019
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
4 changes: 2 additions & 2 deletions projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,15 +318,15 @@ export class IgxTextHighlightDirective implements AfterViewInit, OnDestroy, OnCh
if (this._observer === null) {
const callback = (mutationList) => {
mutationList.forEach((mutation) => {
const removedNodes = new Array(... mutation.removedNodes);
const removedNodes = Array.from(mutation.removedNodes);
removedNodes.forEach((n) => {
if (n === this._container) {
this._nodeWasRemoved = true;
this.clearChildElements(false);
}
});

const addedNodes = new Array(... mutation.addedNodes);
const addedNodes = Array.from(mutation.addedNodes);
addedNodes.forEach((n) => {
if (n === this.parentElement.firstElementChild && this._nodeWasRemoved) {
this._container = this.parentElement.firstElementChild;
Expand Down
17 changes: 9 additions & 8 deletions projects/igniteui-angular/src/lib/grids/cell.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,12 +267,15 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
*/
get inEditMode(): boolean {
const editableCell = this.gridAPI.get_cell_inEditMode(this.gridID);
if (editableCell) {
return this.cellID.rowID === editableCell.cellID.rowID &&
this.cellID.columnID === editableCell.cellID.columnID;
} else {
return false;
const result = editableCell ? this.cellID.rowID === editableCell.cellID.rowID &&
this.cellID.columnID === editableCell.cellID.columnID : false;

if (result && !this._inEditMode && this.highlight && this.grid.lastSearchInfo.searchText) {
this.highlight.observe();
}
this._inEditMode = result;

return result;
}

/**
Expand All @@ -289,9 +292,6 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
if (this.column.editable && value) {
this.focused = true;
this.gridAPI.set_cell_inEditMode(this.gridID, this);
if (this.highlight && this.grid.lastSearchInfo.searchText) {
this.highlight.observe();
}
this.editValue = this.value;
} else {
this.gridAPI.escape_editMode(this.gridID, this.cellID);
Expand Down Expand Up @@ -498,6 +498,7 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
private cellSelectionID: string;
private prevCellSelectionID: string;
private previousCellEditMode = false;
private _inEditMode: boolean;

constructor(
public gridAPI: GridBaseAPIService<IgxGridBaseComponent>,
Expand Down
15 changes: 8 additions & 7 deletions projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -714,8 +714,7 @@ describe('IgxGrid - search API', () => {
expect(isInView(3, grid.rowList.first.virtDirRow.state)).toBeTruthy();
});

it('should keep the active highlight when active cell enters and exits edit mode', () => {
pending('When the cell enters edit mode, the highlight stays and the content is doubled! Happens in tests only!');
it('should keep the active highlight when active cell enters and exits edit mode', async () => {
const rv = fix.debugElement.query(By.css(CELL_CSS_CLASS)).nativeElement;
const cell = grid.getCellByColumn(0, 'ID');
const initialValue = rv.textContent;
Expand All @@ -724,31 +723,32 @@ describe('IgxGrid - search API', () => {

cell.column.editable = true;
fix.detectChanges();
await wait(16);

grid.findNext('1');

activeHighlight = rv.querySelector('.' + component.activeClass);
expect(activeHighlight).not.toBeNull();

cell.inEditMode = true;
await wait(16);
fix.detectChanges();

expect(cell.inEditMode).toBe(true);
activeHighlight = rv.querySelector('.' + component.activeClass);
expect(activeHighlight).toBeNull();

cell.inEditMode = false;
await wait(16);
fix.detectChanges();

expect(rv.textContent).toBe(initialValue);
expect(rv.innerText).toBe(initialValue);
expect(rv.querySelectorAll('.' + component.highlightClass).length).toBe(1);
activeHighlight = rv.querySelector('.' + component.activeClass);
expect(activeHighlight).not.toBeNull();
});

it('should update highlights when a new value is entered', () => {
pending('When the cell enters edit mode, the highlight stays and the content is doubled! Happens in tests only!');

it('should update highlights when a new value is entered', async () => {
const rv = fix.debugElement.query(By.css(CELL_CSS_CLASS));
const cell = grid.getCellByColumn(0, 'ID');
cell.column.editable = true;
Expand All @@ -774,8 +774,9 @@ describe('IgxGrid - search API', () => {

cell.update(inputElem.value);
fix.detectChanges();
await wait(16);

expect(rv.nativeElement.textContent).toBe('11');
expect(rv.nativeElement.innerText).toBe('11');
activeHighlight = rv.nativeElement.querySelector('.' + component.activeClass);
const highlights = rv.nativeElement.querySelectorAll('.' + component.highlightClass);
expect(highlights.length).toBe(2);
Expand Down