Ticket T871268
Visible to All Users

Devextreme React - Change Form Item Option programmatically

created 5 years ago

Hello,

i have a problem with programmatically changing form item options inside the onFieldDataChanged callback method (line 109 inside App.js) on the form element. there is an endless loop inside the onOptionChanged callback method (line 120 inside App.js).

here is a project with the error: https://codesandbox.io/s/devextreme-dynamic-form-uv0dg and 2 devtools screenshots that says, that the form items property is every time changed.

Steps for reproducing:

  • select a user
  • fill out test field
  • fill out test 2 field
  • clear select with (X) button

–> endless loop

Thanks for your help.

Answers approved by DevExpress Support

created 5 years ago

Hello Sebastian,
Thank you for the sample. I simplified it and now it calls itemOption any time:

TypeScript
const handleFieldDataChanged = useCallback(e => { e.component.itemOption('test2', 'visible', false); }, []);

It is enough to replicate the issue.
Even though, you call itemOption to change the item's visibility, the formItems variable remains unchanged. As a result, the component function generates the same set of items. It doesn't explain why it happens in a loop but anyway there is a solution - modify formItems instead of calling itemOption.
Please see the modified CodeSandbox sample. Comment and uncomment marked code snippets to reproduce and solve the issue. Let me know if this approach is suitable for you.

    Comments (2)
    SK SK
    Sebastian Kloppe 5 years ago

      Thanks for your response. Your modified sample works. But i think this should be marked as a workaround and not a fix.

      Andrew Ser (DevExpress Support) 5 years ago

        Hi,
        Currently, we don't recommend mixing React states and options. If you want to use states, use this approach to work with widgets as well.
        We are researching opportunities on how to support this mix in the scope of the Form - The ItemOptions method does not update column count of GroupItems. Please add that thread to your favorites to be notified of our progress.

        I hope you find this information useful.

        Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

        Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.