Global search of table should be triggered only on enter

This commit is contained in:
navaneeth 2021-06-01 13:39:17 +05:30
parent 58f2375f75
commit efbc428daa
2 changed files with 14 additions and 6 deletions

View file

@ -457,11 +457,19 @@ export function Table({
<div className="ms-2 d-inline-block"> <div className="ms-2 d-inline-block">
Search:{' '} Search:{' '}
<input <input
value={value || ''} defaultValue={value || ''}
onChange={(e) => { onBlur={(e) => {
setValue(e.target.value); setValue(e.target.value);
onChange(e.target.value); onChange(e.target.value);
}} }}
onKeyDown={(e) => {
if(e.key === 'Enter') {
setValue(e.target.value);
onChange(e.target.value);
}
}
}
placeholder={`${count} records`} placeholder={`${count} records`}
style={{ style={{
border: '0' border: '0'

View file

@ -9,9 +9,9 @@ export const componentTypes = [
data: { type: 'code', displayName: 'Table data' }, data: { type: 'code', displayName: 'Table data' },
loadingState: { type: 'code', displayName: 'Loading state' }, loadingState: { type: 'code', displayName: 'Loading state' },
columns: { type: 'array', displayName: 'Table Columns' }, columns: { type: 'array', displayName: 'Table Columns' },
serverSidePagination: { type: 'toggle', displayName: 'Server Side Pagination'}, serverSidePagination: { type: 'toggle', displayName: 'Server-side pagination'},
actionButtonBackgroundColor: { type: 'color', displayName: 'Background Color'}, actionButtonBackgroundColor: { type: 'color', displayName: 'Background color'},
actionButtonTextColor: { type: 'color', displayName: 'Text Color'} actionButtonTextColor: { type: 'color', displayName: 'Text color'}
}, },
defaultSize: { defaultSize: {
width: 810, width: 810,
@ -20,7 +20,7 @@ export const componentTypes = [
events: { events: {
onRowClicked: { displayName: 'On row clicked'}, onRowClicked: { displayName: 'On row clicked'},
onBulkUpdate: { displayName: 'Bulk update query'}, onBulkUpdate: { displayName: 'Bulk update query'},
onPageChanged: { displayName: 'On page changed query'} onPageChanged: { displayName: 'On page changed'}
}, },
styles: { styles: {
textColor: { type: 'color', displayName: 'Text Color' } textColor: { type: 'color', displayName: 'Text Color' }