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.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

馃悰 Bug: DateFilter autocompletes on first character of the input #411

Open
timargeli opened this issue Mar 7, 2024 · 0 comments
Open

Comments

@timargeli
Copy link

Version: @inovua/reactdatagrid-community@5.10.2

The DateFilter autocompletes the input (when entered manually) on the first character to become 000[entered character]-01-01 instead of waiting for more characters.
You can reproduce this on the "https://reactdatagrid.io/docs/filtering" site on the Date filters demo.
It works fine (it doesn't autocomplete) when used with inrange, for example the demo with the Range filters.

The demo code copied from the site:

import React, { useState } from 'react'

import ReactDataGrid from '@inovua/reactdatagrid-enterprise'
import '@inovua/reactdatagrid-enterprise/index.css'

import NumberFilter from '@inovua/reactdatagrid-community/NumberFilter'
import DateFilter from '@inovua/reactdatagrid-community/DateFilter'
import CheckBox from '@inovua/reactdatagrid-community/packages/CheckBox'

import flags from './flags'
import contacts from './contacts'

const gridStyle = { minHeight: 600 }

const columns = [
{ name: 'id', header: 'Id', defaultVisible: false, defaultWidth: 50, type: 'number' },
{ name: 'firstName', defaultFlex: 1, maxWidth: 200, header: 'First name' },
{
name: 'address',
defaultFlex: 1,
header: 'Address'
},
{
name: 'createdOn',
header: 'User created date',
defaultFlex: 1,
// need to specify dateFormat
dateFormat: 'YYYY-MM-DD',
filterEditor: DateFilter,
filterEditorProps: (props, { index }) => {
// for range and notinrange operators, the index is 1 for the after field
return {
dateFormat: 'MM-DD-YYYY',
placeholder: index == 1 ? 'Created date is before...': 'Created date is after...'
}
},
render: ({ value, cellProps: { dateFormat } }) =>
moment(value).format(dateFormat),
}
];

const defaultFilterValue = [
{ name: 'address', operator: 'startsWith', type: 'string', value: '' },
{ name: 'firstName', operator: 'startsWith', type: 'string', value: '' },
{ name: 'createdOn', operator: 'after', type: 'date', value: '' }
];

const App = () => {
const [enableFiltering, setEnableFiltering] = useState(true);

return (


Filterable DataGrid with date filter


<div style={{ marginBottom: 20 }}>
<CheckBox checked={enableFiltering} onChange={value => setEnableFiltering(value)}>Enable filtering



);
}

export default () =>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant