Skip to content

Commit

Permalink
fix: regression Edit cell mouseout should save & excel copy should wo…
Browse files Browse the repository at this point in the history 
…rk (#57)

- fixes a bug identified in Angular-Slickgrid [issue](ghiscoding/Angular-Slickgrid#1103) caused by a regression introduced in Slickgrid-Universal PR [901](ghiscoding/slickgrid-universal#901)
- requires Slickgrid-Universal PR [917](ghiscoding/slickgrid-universal#917) to be merged and released
- the regression came after I wanted to fix another bug which was that making a cell range and Copy+Paste wasn't working, when fixing that bug it caused a new bug (this regression). This PR should fix both of these bugs and remove a very old hack that was introduced with `suppressActiveCellChangeOnEdit` which is no longer required
- added Cypress E2E tests to cover the bug identified in Angular-Slickgrid
  • Loading branch information
@ghiscoding
ghiscoding authored Feb 24, 2023
1 parent 6c2e6bd commit 152bc80
Show file tree
Hide file tree
Showing 5 changed files with 195 additions and 173 deletions.
24 changes: 12 additions & 12 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,11 +76,11 @@
]
},
"dependencies": {
"@slickgrid-universal/common": "~2.5.0",
"@slickgrid-universal/custom-footer-component": "~2.5.0",
"@slickgrid-universal/empty-warning-component": "~2.5.0",
"@slickgrid-universal/event-pub-sub": "~2.5.0",
"@slickgrid-universal/pagination-component": "~2.5.0",
"@slickgrid-universal/common": "~2.6.0",
"@slickgrid-universal/custom-footer-component": "~2.6.0",
"@slickgrid-universal/empty-warning-component": "~2.6.0",
"@slickgrid-universal/event-pub-sub": "~2.6.0",
"@slickgrid-universal/pagination-component": "~2.6.0",
"dequal": "^2.0.3",
"dompurify": "^3.0.0",
"font-awesome": "^4.7.0",
Expand All @@ -99,13 +99,13 @@
"@fnando/sparkline": "^0.3.10",
"@popperjs/core": "^2.11.6",
"@release-it/conventional-changelog": "^5.1.1",
"@slickgrid-universal/composite-editor-component": "~2.5.0",
"@slickgrid-universal/custom-tooltip-plugin": "~2.5.0",
"@slickgrid-universal/excel-export": "~2.5.0",
"@slickgrid-universal/graphql": "~2.5.0",
"@slickgrid-universal/odata": "~2.5.0",
"@slickgrid-universal/rxjs-observable": "~2.5.0",
"@slickgrid-universal/text-export": "~2.5.0",
"@slickgrid-universal/composite-editor-component": "~2.6.0",
"@slickgrid-universal/custom-tooltip-plugin": "~2.6.0",
"@slickgrid-universal/excel-export": "~2.6.0",
"@slickgrid-universal/graphql": "~2.6.0",
"@slickgrid-universal/odata": "~2.6.0",
"@slickgrid-universal/rxjs-observable": "~2.6.0",
"@slickgrid-universal/text-export": "~2.6.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3",
Expand Down
172 changes: 87 additions & 85 deletions src/examples/slickgrid/Example3.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -332,7 +332,7 @@ export default class Example3 extends React.Component<Props, State> {
fetch: (searchText: string, updateCallback: (items: false | any[]) => void) => {
/** with FETCH, note this demo won't work because of CORS */
// this.httpFetch.fetch(`http://gd.geobytes.com/AutoCompleteCity?q=${searchText}`)
// .then(response => response.json())
// .then(response => updateCallback())
// .then(data => response(data))
// .catch(error => console.log('fetch error:', error));

Expand Down Expand Up @@ -806,97 +806,99 @@ export default class Example3 extends React.Component<Props, State> {
</h2>
<div className="subtitle" dangerouslySetInnerHTML={{ __html: this.subTitle }}></div>

<div className='col-sm-6'>
<label className="me-1">autoEdit setting:</label>
<span id='radioAutoEdit'>
<label className='radio-inline control-label me-1' htmlFor='radioTrue'>
<input
type='radio'
name='inlineRadioOptions'
id='radioTrue'
defaultChecked={this.state.isAutoEdit}
onInput={() => this.setAutoEdit(true)}
/>{' '}
ON (single-click)
</label>
<label className='radio-inline control-label' htmlFor='radioFalse'>
<input
type='radio'
name='inlineRadioOptions'
id='radioFalse'
onInput={() => this.setAutoEdit(false)}
/>{' '}
OFF (double-click)
</label>
</span>
<div className='row col-sm-12'>
<span>
<button className='btn btn-outline-secondary btn-sm me-1' onClick={() => this.undo()}>
<i className='fa fa-undo me-1'></i>
Undo last edit(s)
</button>
<label className='checkbox-inline control-label me-1' htmlFor='autoCommitEdit'>
<div className="row">
<div className='col-sm-6'>
<label className="me-1">autoEdit setting:</label>
<span id='radioAutoEdit'>
<label className='radio-inline control-label me-1' htmlFor='radioTrue'>
<input
type='radio'
name='inlineRadioOptions'
id='radioTrue'
defaultChecked={this.state.isAutoEdit}
onInput={() => this.setAutoEdit(true)}
/>{' '}
ON (single-click)
</label>
<label className='radio-inline control-label' htmlFor='radioFalse'>
<input
type='checkbox'
id='autoCommitEdit'
data-test='auto-commit'
onChange={() => this.changeAutoCommit()}
/>
Auto Commit Edit
type='radio'
name='inlineRadioOptions'
id='radioFalse'
onInput={() => this.setAutoEdit(false)}
/>{' '}
OFF (double-click)
</label>
</span>
</div>
<div className='row' style={marginTop5px}>
<div className='col-sm-12'>
<button className='btn btn-outline-secondary btn-sm' onClick={() => this.reactGrid.filterService.clearFilters()}>
Clear Filters
</button>
<button
className='btn btn-outline-secondary btn-sm mx-1' onClick={() => this.reactGrid.sortService.clearSorting()}>
Clear Sorting
</button>
<button
className='btn btn-sm btn-outline-primary'
data-test="add-item-btn"
onClick={() => this.addItem()}
title='Clear Filters &amp; Sorting to see it better'
>
Add item
</button>
<button
className='btn btn-sm btn-outline-danger mx-1'
data-test="delete-item-btn"
onClick={() => this.deleteItem()}
>
Delete item
</button>
<div className='row col-sm-12'>
<span>
<button className='btn btn-outline-secondary btn-sm me-1' data-test='undo-btn' onClick={() => this.undo()}>
<i className='fa fa-undo me-1'></i>
Undo last edit(s)
</button>
<label className='checkbox-inline control-label me-1' htmlFor='autoCommitEdit'>
<input
type='checkbox'
id='autoCommitEdit'
data-test='auto-commit'
onChange={() => this.changeAutoCommit()}
/>
Auto Commit Edit
</label>
</span>
</div>
</div>
<div className='row' style={marginTop5px}>
<div className='col-sm-12'>
<button
className='btn btn-outline-secondary btn-sm'
data-test='add-title-column'
onClick={() => this.dynamicallyAddTitleHeader()}
>
<i className='fa fa-plus me-1'></i>
Dynamically Duplicate Title Column
</button>
<button
className='btn btn-outline-secondary btn-sm mx-1'
data-test='remove-title-column'
onClick={() => this.dynamicallyRemoveLastColumn()}
>
<i className='fa fa-minus me-1'></i>
Dynamically Remove Last Column
</button>
<div className='row' style={marginTop5px}>
<div className='col-sm-12'>
<button className='btn btn-outline-secondary btn-sm' onClick={() => this.reactGrid.filterService.clearFilters()}>
Clear Filters
</button>
<button
className='btn btn-outline-secondary btn-sm mx-1' onClick={() => this.reactGrid.sortService.clearSorting()}>
Clear Sorting
</button>
<button
className='btn btn-sm btn-outline-primary'
data-test="add-item-btn"
onClick={() => this.addItem()}
title='Clear Filters &amp; Sorting to see it better'
>
Add item
</button>
<button
className='btn btn-sm btn-outline-danger mx-1'
data-test="delete-item-btn"
onClick={() => this.deleteItem()}
>
Delete item
</button>
</div>
</div>
<div className='row' style={marginTop5px}>
<div className='col-sm-12'>
<button
className='btn btn-outline-secondary btn-sm'
data-test='add-title-column'
onClick={() => this.dynamicallyAddTitleHeader()}
>
<i className='fa fa-plus me-1'></i>
Dynamically Duplicate Title Column
</button>
<button
className='btn btn-outline-secondary btn-sm mx-1'
data-test='remove-title-column'
onClick={() => this.dynamicallyRemoveLastColumn()}
>
<i className='fa fa-minus me-1'></i>
Dynamically Remove Last Column
</button>
</div>
</div>
</div>
</div>

<div className='col-sm-6'>
{alertWarning}
{objectAlert}
<div className='col-sm-6'>
{alertWarning}
{objectAlert}
</div>
</div>

<div className='col-sm-12'>
Expand Down
2 changes: 1 addition & 1 deletion src/slickgrid-react/global-grid-options.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@ export const GlobalGridOptions: Partial<GridOption> = {
numberedMultiColumnSort: true,
tristateMultiColumnSort: false,
sortColNumberInSeparateSpan: true,
suppressActiveCellChangeOnEdit: true,
suppressActiveCellChangeOnEdit: false,
pagination: {
pageSizes: [10, 15, 20, 25, 30, 40, 50, 75, 100],
pageSize: 25,
Expand Down
20 changes: 20 additions & 0 deletions test/cypress/e2e/example03.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,26 @@ describe('Example 3 - Grid with Editors', { retries: 1 }, () => {
.each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
});

it('should be able to change Title with Custom Editor and expect to save when changing the value and then mouse clicking on a different cell', () => {
cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', 'Task 1').click();
cy.get('input.editor-text')
.type('Task 8888');

// mouse click on next cell on the right & expect a save
cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(4)`).click();
cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', 'Task 8888');
});

it('should be able to undo the editor and expect it to be opened, then clicking on Escape should reveal the cell to have rolled back text of "Task 1"', () => {
cy.get('[data-test="undo-btn"]').click();

cy.get('input.editor-text')
.should('exist')
.type('{esc}');

cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', 'Task 1');
});

it('should enable "Auto Commit Edit"', () => {
cy.get('[data-test=auto-commit]')
.click();
Expand Down
Loading

0 comments on commit 152bc80

Please sign in to comment.