Issue Type

Bug report

Description

Every time the user clicks on the table header to sort the data, or writes something in the filter box (in the filterRow), or tries to apply a filter, an error saying "too much recursion" is thrown (tested in Firefox).

Steps to Reproduce

The simple interaction with filters.

Current Behavior

Every filter interaction throws the exception.

Expected Behavior

The normal filtering behaviour.

Demo

Stackblitz interactive demo
Local simple parcel-bundler demo

Environment Details

• devextreme version: 18.1.6
• devextreme-react version: 18.1.6-alpha.11
• react version: 16.5.2

Issue Type

bug report

Description

The issue is related to ResponsiveBox component, using react-router.

Steps to Reproduce

In a project with react-router, switch between pages, the path with ResponsiveBox component will only be rendered once.

Current Behavior

The ResponsiveBox templates are rendered just once.

Expected Behavior

The ResponsiveBox templates are rendered each time the route is active.

Demo

https://stackblitz.com/edit/devextreme-react-u13yua

Environment Details

devextreme: 18.1.4
devextreme-react:18.1.4-alpha.8
react: 16.4.1
react-router-dom: 4.3.1

Issue Type

bug report

Description

Steps to Reproduce

Use the example app from the repo

1. Open the textBox
2. Modify the validation example:

<TextBox valueChangeEvent="input" defaultValue={"required text"}>
    <Validator>
        <ValidationRule type="required" message="this is required" />
    </Validator>
</TextBox>

3. Start the app

Current Behavior

Validator is not bound to the TextBox

Expected Behavior

Validator is bound to the TextBox

Environment Details

v18.1.4-alpha.7

Can be reproduced with this example by clicking a node.

Issue Type

bug report

Description

The issue is related to the component TableHaderRow (showSortingColumns enabled) and component SortingStage.

Steps to Reproduce

1. Sort a column
2. Minimize Browser
3. Maximize Browser
4. Wait ~500ms

Current Behavior

"Sort" Tooltip showing up after refocusing window even when not hovering the header.

Expected Behavior

Tooltip should only show on hover.

Demo

https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/sorting/

Issue Type

bug report

Description

The issue may be related to #151

Current Behavior

1. The menu isn't visible by default
2. The menu has one rendered item

Expected Behavior

1. The menu is visible by default
2. The menu has two rendered items

Demo

https://stackblitz.com/edit/devextreme-react-r5m6tj?file=index.js

Issue Type

• bug report
• feature request

Current Behavior

Accordion collapses itemTitleComponent when I set itemTitleComponent (even with exact height)

Steps to Reproduce

1. Init Accordion with itemTitleComponent option
2. Use generic theme (dx.light.css)
3. Setting {height: "100px"} to item template doesn't help

Demo

https://stackblitz.com/edit/devextreme-react-exhnc8

Environment Details

devextreme 18.1.1-pre-18093
devextreme-react 18.1.1-alpha.3
react 16.3.0

Issue Type

bug report

Description

The issue is related to Form

Steps to Reproduce

See demo and issue title

Current Behavior

Expected Behavior

Demo

https://stackblitz.com/edit/devextreme-react-1ubd9e?file=index.js

Environment Details

• devextreme version: 18.1.6-pre-18220
• devextreme-react version: 18.1.5-alpha.9
• react version: 16.4.1

Issue Type

bug report

Description

The issue is related to Toolbar

Steps to Reproduce

See demo to reproduce.

Current Behavior

Second widget rendered with collapsed width.

Expected Behavior

Second widget will be rendered with width like first widget.

Demo

https://stackblitz.com/edit/devextreme-react-b9ljgy?file=index.js

Environment Details

• devextreme version: "^18.1.3
• devextreme-react version: "^18.1.4-alpha.7"
• react version: "^16.4.1"

Issue Type

Feature request

Description

Widgets like Button, TextBox and others are not accepting style and className props. If I want to place two Buttons next to each other with a margin between them, I have to wrap them in a div.

Environment Details

devextreme 18.1.1-pre-18093
devextreme-react 18.1.1-alpha.4
react 16.3.0
typescript 2.8

Issue Type

feature request

Description

There is no type validators (prop-types and typescript declarations) in nested components now. It will be nice to have it.

Current Behavior

for example:

class Editing extends NestedOption<{
  allowAdding?: any;
  allowDeleting?: any;
  allowDragging?: any;
  allowResizing?: any;
  allowUpdating?: any;
}> {
  public static OptionName = "editing";
}

Expected Behavior

class Editing extends NestedOption<{
  allowAdding?: boolean;
  allowDeleting?: boolean;
  allowDragging?: boolean;
  allowResizing?: boolean;
  allowUpdating?: boolean;
}> {
  public static OptionName = "editing";
}

Issue Type

'bug'

Description

The issue is related to Toolbar

Steps to Reproduce

1. Put into the items such data:
   [
   { text: "Test1", items: [{ text: "2" }] },
   { text: "Test2" }
   ]

Current Behavior

it failed on Devextreme-react toolbar, but work on pure devextreme.

Expected Behavior

Demo

https://stackblitz.com/edit/devextreme-react-aubd86?file=index.js - devextreme-react
https://codepen.io/anon/pen/ZMgLPo - devextreme

Environment Details

• devextreme version: 18.1.6
• devextreme-react version: 18.1.6-alpha-11
• react version: 16.5.2

Issue Type

bug report

Steps to Reproduce

Add Validator to any editor like TextBox

      <TextBox defaultValue={"required"}>
        <Validator validationRules={this.validationRules}/>
      </TextBox>

Current Behavior

Error in the console: E0120 - Adapter for a DevExpressValidator component cannot be configured.

Expected Behavior

No errors. Validation rules are applied to editor.

Demo

https://stackblitz.com/edit/devextreme-react-bpyjro?file=index.js

Type string is missed in

searchExpr: PropTypes.oneOfType([
    PropTypes.array,
    PropTypes.func
  ]),

Issue Type

bug report

Steps to Reproduce

• create a new app npx create-react-app my-app
• add DevExtreme Button:

import { Button } from 'devextreme-react';
...
render() {
    return (
        <Button text='Example Button' />
    );
 }

• build project npm run build

Current Behavior

The resulting bundle contains all DevExtreme widgets. The total bundle size is about 3MB.

Expected Behavior

The resulting bundle should contain only the dxButton widget

Issue Type

bug report

Description

menuVisible is the dynamic option of the SlideOut and SlideOutView so it should have default* alternative to use it in uncontrolled mode.

Demo

https://stackblitz.com/edit/devextreme-react-182usj?file=index.js

Issue Type

bug report

Description

In Scheduler code:

class Views extends NestedOption

should be 'View'

Issue Type

bug report

Steps to Reproduce

1. Init List with ItemComponent option and 2 data items
2. Change ItemComponent's root element after 1s (loading simulation)
3. Change List's data items after 5s (filtration simulation)

Current Behavior

ReactList generates 2 templates after step 1 and 2 templates after step 2

Expected Behavior

ReactList generates 2 templates after step 1, removes 2 templates and generates 2 templates after step 2.

Demo

https://stackblitz.com/edit/devextreme-react-1dzhv6?file=index.js

Environment Details

devextreme 18.1.1-pre-18093
devextreme-react 18.1.1-alpha.4
react 16.3.0

Issue Type

• bug report
• feature request

Current Behavior

Expected Behavior

Steps to Reproduce

Demo

Environment Details

Issue Type

bug report

Description

The issue is related to grouped List

Current Behavior

key value is undefined in groupComponent

Expected Behavior

key value has value from grouped dataSource

Demo

https://stackblitz.com/edit/devextreme-react-71rsvj?file=index.js

Issue Type

"bug report"

Description

The issue is related to SlideOutView

Steps to Reproduce

See demo to reproduce:

1. Pay attention to .dx-template-wrapper height. It is equal "auto" and prevent children with % as size

Current Behavior

Expected Behavior

Demo

https://stackblitz.com/edit/devextreme-react-c7t368?file=index.js

Environment Details

• devextreme version: 18.1.6-pre-18220
• devextreme-react version: 18.1.5-alpha.10 (regression, was OK in the alpha.9)
• react version: 16.4.2

Currently, TypeScript declarations are provided for the DevExtreme Components. It would be great to make it possible to take advantages of typechecking in JS projects.

We can use the React prop-types for this purpose.

Issue Type

bug report

Description

The issue is related to the SlideOut and the SlideOutView widgets.

Environment Details

• devextreme-react version: 18.1.4-alpha.8

Please, see demo:
https://stackblitz.com/edit/devextreme-react-qmxr6q?file=index.js

Expected result - items changed, itemRender changed

Issue Type

feature request

Description

Now to use webpack code-splitting you should type:

import("devextreme-react/ui/text-box")
.then(({ TextBox }) => (TextBox));

I belive that's with default exports it would be more convenient:

import("devextreme-react/ui/text-box");

Issue Type

bug report

Steps to Reproduce

See this demo

Current Behavior

Scheduler appointments do not fit cells.

Expected Behavior

Scheduler appointments fit cells.

Demo

https://js.devexpress.com/Demos/WidgetsGallery/Demo/Scheduler/Overview/React/Light/

Environment Details

• devextreme version: 18.1.5
• devextreme-react version: 18.1.5-alpha.9
• react version: nevermind

Issue Type

bug report

Steps to Reproduce

1. Init Toolbar with
   items ={ [ { "locateInMenu": "always", "location": "before", "widget": 'button', "options": { "text": "Contacts" } } ]}
   and
   ItemComponent ={() => { return (<div>Expected</div>); }}
2. Open menu in toolbar.

Current Behavior

ReactToolbar ignore ItemComponent and create button widget in menu.

Expected Behavior

ReactToolbar respect ItemComponent and render in <div>Expected</div> menu.

Demo

https://stackblitz.com/edit/devextreme-react-rgobqk?file=index.js

Environment Details

devextreme 18.1.1-pre-18093
devextreme-react 18.1.1-alpha.4
react 16.3.0

Issue Type

Feature request

Description

Currently, option update prevention works well for scalar values (numbers, strings, etc.), object values have to be scoped.

Relates to the #78.

Current Behavior

An object set to an option is compared to the previous value by reference only.

Expected Behavior

A deep check for objects' equality also performed.

Environment Details

devextreme-react 18.1.1-alpha.3

Issue Type

feature request

Description

This relates to all nested options template props. E.g. DataGrid's Column.cellTemplate.

Current Behavior

The Column component has only the cellTemplate prop

Expected Behavior

The Column component has cellRender and cellComponent as well

Environment Details

• devextreme-react version: 18.1.4-alpha.8

When the content of the button is not set on the text property, when the setState is called, the text remains the same, the content of the button is not updated. Example;

<Button type="success">{this.state.yesText}</Button>

By calling setState with a new text, the button will not change, it will remain with the previous state.

Issue Type

bug report

Description

visible is the dynamic option of the ActionSheet so it should have default* alternative to use it in uncontrolled mode.

Demo

https://stackblitz.com/edit/devextreme-react-dpl9wz?file=index.js

I'm using the latest version of devextreme (18.1.4-pre-18155), with the latest version of devextreme-react (18.1.4-alpha.7), and with the accordion widget, I get a warning on the JS file generated from my TSX file:

Line 19: Unexpected mix of '&&' and '||' no-mixed-operators

Line 29: Unexpected mix of '&&' and '||' no-mixed-operators

The code it self is the following:

function AccordionTitleTemplate() {
        return _super !== null && _super.apply(this, arguments) || this;
    }

function AccordionContentTemplate() {
        return _super !== null && _super.apply(this, arguments) || this;
    }

Everything works, at least I saw no issues, I just would like to get ride of the warning.

Issue Type

Question

Description

How to use setTemplateEngine in React?

I need dynamically to change dataSource in DataGrid and data might contents different template IDs in cellTemplate field (certainly templates compiled on client already).

Issue Type

bug report

Description

List re-renders itemComponent multiple times on "More" button or filter changing

Steps to Reproduce

1. Init list with dataSource (pageSize < item.length) and itemComponent (log props)
2. Click "More"
3. See console

Current Behavior

For 20 items it calls itemComponent 600+ times

Expected Behavior

For 20 items it calls itemComponent ~20 times

Demo

https://stackblitz.com/edit/devextreme-react-xruggw?file=index.js

Environment Details

devextreme 18.1.1-pre-18093
devextreme-react 18.1.1-alpha.4
react 16.3.0

Issue Type

"bug report"

Description

The issue is related to className property.

Steps to Reproduce

1. Open demo.
2. Click button with text "Click"
3. See on "target" button

Current Behavior

Expected Behavior

Demo

https://stackblitz.com/edit/devextreme-react-mqcw5y?file=index.js

Environment Details

• devextreme version: 18.1.6-pre-18220
• devextreme-react version: 18.1.5-alpha.10 (regression, was OK in the alpha.9)
• react version: 16.4.2

Issue Type

bug report

Description

I have list widget that palced in contanier component. List widget items listen onClick event and show alert message on firing this event. Also list widget listen onItemClick event and change parent state on firing this event. (This is the simulating navigate to view function that change location in browser. Our layout has master pane with list and detail pane with item content, so list should be unchanged.)

Current Behavior

If i set elementAttr option to list and click list items, after click list will be lose selection and click on list item will not be have some effect.

Expected Behavior

Expected that elementAttr will not affect to the widget behavior.

Steps to Reproduce

See demo with reproducing

Demo

https://stackblitz.com/edit/devextreme-react-ozanfd?file=index.js

Environment Details

devextreme 18.1.1-pre-18093
devextreme-react 18.1.1-alpha.3
react 16.3.0

Issue Type

bug report

Steps to Reproduce

1. Create a TagBox and define a tagRender prop.
2. Select several items via UI.
3. Click on the clear button.

Current Behavior

Exception

Expected Behavior

No Exception

Demo

https://stackblitz.com/edit/devextreme-react-g59gln

Environment Details

• devextreme version: ^18.1.4
• devextreme-react version: 18.1.4-alpha.8
• react version: latest ^16.2.0

Issue Type

Bug report

Description

The issue is related to DataGrid editCellComponent, error thrown when loses focus edit component.

Steps to Reproduce

1. Click Row cell
2. Click other then row cell (onblur)

Current Behavior

Error thrown: Error in /turbo_modules/[email protected]/cjs/react-dom.development.js (15067:22)
Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Expected Behavior

Fit and don't throw error

Demo

https://stackblitz.com/edit/react-mzbcg4

Environment Details

• devextreme version:18.1.5
• devextreme-react version:18.1.5
• react version:16.1

Issue Type

   Bug ?

Description

  DateBox wrapper problem with calendar navigator buttons and caption.

Steps to Reproduce

   Open the Datebox.

Current Behavior

   Buttons does not stay with fixed width.

Expected Behavior

  [<]     Month    [>]

Environment Details

Chrome 65.0.3325.181 )Official Buid) (64-Bit)
Microsoft Edge 42.17134.1.0

"dependencies": {
"devextreme": "^18.1.4-pre-18155",
"devextreme-react": "^18.1.4-alpha.7"
....
}

PS

I fixed this in my app forcing the following css styles:

.dx-calendar-navigator .dx-button {
width:22px;
}

.dx-calendar-navigator .dx-button.dx-state-hover {
width:22px;
}

.dx-calendar-caption-button {
width:auto !important;
}

Issue Type

Question

Description

If I understand it well, if I need to configure columns manually in the DataGrid, to handle sorting, I have to react to onOptionChanged callback, process the argument and update column properties accordingly.

Unfortunately, the argument format is very impractical for some use cases. For instance, if I click a column to change sorting the callback argument looks like this:

{ fullName: "columns[0].sortOrder", name: "columns", previousValue: "desc", value: "asc" }

With this information, how am I supposed to easily update column sorting properties without parsing the fullName?

Environment Details

devextreme-react: 18.1.3-alpha.5

Issue Type

bug report

Description

There is should be possible to set uncontrolled pager options.

Current Behavior

When i set these pager options:
pager={{ showPageSizeSelector: true, allowedPageSizes: [5, 10, 20], showInfo: true }}
and try to change pageSize value in data grid, all re rendered with default pageSize value, instead selected.

Expected Behavior

Expected that after changing pageSize value, dataGrid will be re rendered with new pageSize value instead default.

Steps to Reproduce

1. Set the pager options from example.
2. try to change pageSize value in data grid/

Demo

https://stackblitz.com/edit/devextreme-react-sirzqz?file=index.js

Environment Details

devextreme 18.1.1-pre-18093
devextreme-react 18.1.1-alpha.3
react 16.3.0

Issue Type

bug report

Description

When i set the columns option and try to change sort in any column, data order doesn't change. If columns options isn't be used all works as expected.

Current Behavior

After click on columnt to sort, widget data will be reolad, but the order will not change.

Expected Behavior

Expected that sorting in widget with columns option will be the same as in the widget without columns option.

Steps to Reproduce

1. Set the dataSource with odata store to widget.
2. Set the columns option to widget.
3. Try to sort column.

Demo

Demo with React widget to reproduce (reuire to enable corse): https://stackblitz.com/edit/devextreme-react-5bymhn?file=index.js

Just want to say that original dxDataGrid (non react widget) work good, for example see this demo: https://codepen.io/anon/pen/mLJpRR

Environment Details

devextreme 18.1.1-pre-18093
devextreme-react 18.1.1-alpha.3
react 16.3.0

Issue Type

Description

The issue is related to Editing Component in Data Grid.
We can show form in editing mode for Data Grid by setting mode='form'. I tried the following way:-

Yet, the editor was not shown as form. The editor showed the row edit method

Steps to Reproduce

Current Behavior

Expected Behavior

Demo

Environment Details

• devextreme version:
• devextreme-react version:
• react version:

Issue Type

bug report

Steps to Reproduce

The "E1010 - The template does not contain the TextBox widget" error occurs if value is assigned to the TextBox.fieldComponent or TextBox.fieldRender property

class Example extends React.Component {
  render() {
    return (
      <SelectBox
        fieldRender={()=>{
          alert(123);
          return (<TextBox value="123"/>);
        }}
      >
      </SelectBox>
    );
  }
}

Demo

https://stackblitz.com/edit/devextreme-react-selectbox-fieldrender?file=index.js

It seems that now setting the component attribute on "any" DevEx component (I've only tried) Button and Menu causes an error on IE:

Objects are not valid as a React child (found: object with keys {$$typeof, key, children, containerInfo, implementation}).

Element:
<Button onClick={this.UserOk.bind(this)} type="success" component={this.RenderButton.bind(this, true)} />

I've tried all variations defined on Markup Customization, and always I get the same error. The strange thing is that this code was working before, and I have no idea what changed.

Issue Type

bug report

Description

The issue is related to the PieChart, its Series ignores nested Label configuration-component

Demo

https://stackblitz.com/edit/devextreme-react-jaulyi

Environment Details

• devextreme-react version: 18.1.5-alpha.10 (regression, was OK in the alpha.9)

Issue Type

• bug report
• feature request

Current Behavior

Setting rowComponent option doesn't have any clear effect. Option rowComponent={()=>{ debugger; }} will not even stop the script execution at the target debugger point.

Expected Behavior

Expected that with this option i can map row-item from dataSource, and return my own rowComponent.

Steps to Reproduce

Just try to set rowComponent option, for example like function with debugger, to make sure that this option doesn't work even in the trivial case

Demo

https://stackblitz.com/edit/devextreme-react-pxaqrw

Environment Details

devextreme 18.1.1-pre-18093
devextreme-react 18.1.1-alpha.3
react 16.3.0

Issue Type

bug report

Steps to Reproduce

1. Create Wrapper with state equals { value: 1 }
2. Init SlideOutView with contentComponent with closure to value
3. Change state to { value: 2 }

Current Behavior

contentComponent renders with old closed value 1

Expected Behavior

contentComponent renders with new closed value 2

Demo

https://stackblitz.com/edit/devextreme-react-q5ksyh?file=index.js

Environment Details

devextreme 18.1.1-pre-18093
devextreme-react 18.1.1-alpha.4
react 16.3.0