I'm making a react app using antd, I'm trying to add modal but it doesn't work, every time I click the trigger button I got errors saying "Uncaught Error: Element ref was specified as a string (header) but no owner was set. You may have multiple copies of React loaded.". Im following this syntax from https://ant.design/components/modal/
I found related problem https://github.com/jrm2k6/react-markdown-editor/issues/55
and according to react
https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs
they dont recommend using ref attribute, instead use a callback pattern.
I dont know what to do..
Any help, thanks.
Related
I started to play around with react select and I what I cannot seem to find in their documentation is to how to do error states. Does react select have a built in way to tell it that its in error states and make the border red?
Add class based on selected value stored in state.
Live demo: https://codesandbox.io/s/react-select-error-handling-60093
I created this CodeSandbox so I could demonstrate a problem with related code (the onChange not firing in a test):
https://codesandbox.io/s/festive-tree-xkw8s?file=/src/App.test.js
However in CodeSandbox I can't even get that far because as soon as I call
userEvent.type(securityField, 'abc{enter}')
I get a set this error in the console:
Error: Uncaught [TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.]
and as a result the loadOptions callback of AsynSelect is never triggered (locally I'm not having any issue with that, just the onChange which isn't firing).
I have not been able to find any examples of or guidance on this error. I haven't used CodeSandbox a lot so maybe I'm missing something basic.
I am not seeing this error in my local environment but I am trying to solve it because I want to finish setting up my original problem.
You want to use react-select-event for interacting with your react-select in testing. This was made specifically for testing with react-testing-library.
I am trying to get React JSON Schema to focus on the first field with an error after submit and I am not able to find any way to do so.
Any thoughts?
There is the onError prop you can use according to the docs. If an error exists, you can use the focus method such as document.getElementById("myTextField").focus() to that first element.
I have a Ant Design 4.x.x Form element without multiple Form.Item. I need to implement some logic involving form items' values, for example disabling a field if another one's value equals something, or recalculate select options when a text input changes.
To do so, I create the form using Form.useForm() and use form.getFieldValue() in my functional component body and / or in the returned JSX, like so :
It is working as I expect to, but at startup, getFieldValue usages throw annoying
index.js:1 Warning: Instance created by `useForm` is not connect to any Form element. Forget to pass `form` prop?
I found that Form functions cannot be used before rendering, and the problem also occured when displaying a form in a Modal like stated in the docs.
So I feel that I'm missing something on how to correctly add custom logic between fields, or doing some calculation involving fields values in component body.
What would be a correct approach to do this ?
Try adding getContainer={false}, to your modal this will work for you.
I want to warn user when user is trying to navigate away from the page(components) making some changes .so I implemented using this article https://medium.com/front-end-weekly/angular-how-keep-user-from-lost-his-data-by-accidentally-leaving-the-page-before-submit-4eeb74420f0d,but I am getting this error
“Uncaught(in promise):TypeError:Cannot read property ‘submitted’ of
undefined” and “Uncaught(in promise):TypeError:Cannot read property
‘dirty’ of undefined” when I was trying to navigate from the component
without making changes.
Could someone please help me with this.Trying to solve this error from 2 days.
Thanks
ps:these errors are coming from can-deactivate method.
case 1:This basically happens when the code is not able to reach your form. In some apps there are some forms which will display when you click some buttons or perform any actions,Otherwise the form will not be there in that page.So whenever you are checking (this.form.submitted or this.form.dirty) make sure form is present.So just add one if statement like this:
if(this.form){
if(this.form.submitted || !this.form.dirty){
return true;
}
}
case 2:This will also happens when you don't implement abstract methods/accessors in your component.