I have a specific need to only make one input field in a form (legacy code) a react component. So, I wrap the input with a div and render into it the 'new' input field that needs some special behavior.
The problem arises because the input field is no longer editable. I try to type into it.. nothing. I narrowed it down to the following:
<input type="text" **data-reactid=".2.0.0.0.1.0.0.1.2.0"**
When I remove that "data-reactid....", by editing via console, it works.
So when I am using react to sub out one form input field with a react one, it doesn't work unless I manually remove that data-reactid..
Is there a workaround for this, or a reason why this is happening?
Well its just a data attribute written by react to help them render into the DOM more efficiently so it should have no real impact on a input element or any element (unless there is code or style explicitly disabling the input) - I realize that this is no real help - because it happens to you, but this is not typical of react apps with inputs or element with data-attributes.
But if its the only bit of react on the page then that id is a bit long and I would have expected something like ".0" or ".0.0" if its wrapped in a div that react controls.
The react-id is only used by the React engine to work out what elements of the DOM need to be re-written when there are changes to state or props in your components.
One thing I noticed is, typically there would be an ID or in react a ref that you applied to the input in order to interact with it (such as getting its value).
I include the mark-up from a simple entry box on the user login form of a working app, as you can see it's not significantly different from what you have and works on all browsers Windows and Mac down to IE8 included.. (but not any IE below 8) and you need various shims for getting it work on IE8.
<input class="username-text-field" id="user-id" type="text" data-reactid=".0.0.0.1.3.0.0.2">
If none of these apply or you have them covered then practicably here should be no reason why your input should be disabled. It should just act like any other input. Have tried just dropping you component onto a simple HTML page with only the input on it, just to debug through the component in isolation?
That said,
It does feel that loading the entire React engine and wiring up a component to allow a single input field is a little over-kill. I realize that you're trying not to have to recreate exactly the same functionality you already have in react again on the legacy form, but if your render function is not too onerous then maybe a simple bit of JavaScript or JQuery might be the answer as a one off in the legacy solution (rather than the hit for the library) - just a thought
Related
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.
My team and I have been using Antd a react component library. I was asked to connect google.map's Places library to an input field so we can get an easy address drop-down list.
The problem is the Antd's input component is wrapped up under the hood. So when I click on an address from google.maps Places menu it appears in the input field for a milli sec then disappears.
I tried all the event.preventDefault(), event.stopPropoagtion(). Is there any trick to combining google.maps places returned data with a well nested react-ui component?
(too long for comment)
I have the exact same problem.
I'm using NextJS with functional component and #react-google-maps/api library.
The workaround I use: simple <input> element combined with the right CSS class to make it look like the Antd <Input>.
Like this:
<LoadScript
googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAP_API_KEY}
libraries={libraries}
>
<Autocomplete
onLoad={(autocomplete) => setAutocomplete(autocomplete)}
onPlaceChanged={onPlaceChanged}
restrictions={{ country: "fr" }}
fields={['geometry.location', 'formatted_address']}
>
<input
type="text"
placeholder="Enter your address"
className="ant-input"
/>
</Autocomplete>
</LoadScript>
This way, when clicking on an address from Places menu, its value stays in the input field.
If anyone has a better and less hacky solution, I'm looking for one!
This is a very simple matter of state management. It sounds like the google-places input field was working correctly or it wouldn't have shown up at all. If your input field is connected to let's say Reactjs then you will need to add the google-places response data to your state-management and it should stop disappearing. This happens a lot when companies use custom state-management systems.
I have a input field:
<input value="0">
which i can easily clear() and type("123") in cypress.
the value gets updated and everything is fine.
on the other side, a prefilled input field like below I cant update because cypress writes my value of .type("123") just at the beginning of the value.
<input value="1500000">
my method is the following:
.find("input")
.clear()
.type(`${input}{enter}`)
changes on the fields fire redux actions, we use redux for our whole state handling. could that be a problem?
otherwise, do you know of this issue?
Try adding an assertion to make Cypress 'wait' for the input to clear:
.clear().should('have.value', '')
.type(...)
I tested using the HTML found here and everything works fine (in the screenshot I wrote "Stefano" instead of the default value)
You hit the point when you cite React: this kind of state changes requires a bit more work to run as expected because React (and Vue etc.) obviously overwrites everything in the DOM.
You're facing a common issue where React re-renders the component as soon as an event is triggered... so you have to change the input value/defaultValue management in your React component, Google for it and you find a plethora of solutions about that 😊
We are developing a huge application with React. One of our forms includes 60+ plus components placed on different Tab items.
When i try to edit an input it took 190ms to see typed chars in the textbox. After digging the problem for hours we realized adding a component increases the response time. Then we decided that the problem is antdesign s render logic. Then we tried it with PrimeReact using "why-did-you-update" package. The result was same!
When any change occurred in the state, all the components ( including Icons :) ) tried to render per "why-did-you-update" messages.
Here is the sandbox : https://codesandbox.io/s/6w30ro2l9w
Are the "why-did-you-update" messages wrong or we missing something?
If you go to the React home page and add the attribute className='button' to the first example "A Simple Component" you should get this result:
(i.e. the div with "Hello Jane" now looks like a button)
If you also add the attribute is='super-nice-button' you should get this result:
(i.e. the button styling is gone)
Why you ask? Seems when you combine className with is react doesn't generate a class attribute on the resulting dom node instead it generates a classname (which obviously has no meaning for the browser). Watch the difference below.
With only the class attribute:
With both the class and the is attributes:
My question: Why does react generate classname and not class when using the is attribute on a react element (and essentially destroying all styling)?
(background: I'm using inline-styling (or Fela) and I like to use the is attribute to tag my divs/panels so I can easily see the flow of components when clicking "Inspect Element" without having to tab over to the "React devtools". I understand it's kind of a hack but is is a supported attribute in React and HTML and it's a nice short word :) )
This is likely related to this:
https://github.com/facebook/react/issues/4933
You'll need to set class instead of className if you're pretending it's a WebComponent.
Personally I'd go a different route, still have it processed like a React component, and do it in a different way, or just use the React devtools.
FWIW, this answer was researched on-the-fly. For future reference, here's the flow:
1) Verified behavior using a basic React JSX fiddle. Confirmed.
2) Searched for the is HTML attribute, which led here within first few links:
What is HTML "is" attribute?
3) Looking in the W3C docs I learned the name of what is is used for. Then I searched for "react components w3c custom elements" which led quickly to:
https://github.com/facebook/react/issues/4933
4) Verified using class instead of className on WebComponent-like DOM, same fiddle.
So from complete ignorance and some surprise I'd say I found the answer in about five minutes.