Comments (7)
Thanks @stachow - I will take a look at this soon. Are you managing ok for a second if I don't get to this for a few days?
from govuk-react-jsx.
Interesting, this doesn't seem to happen for me. Would you be able to put together a minimal reproduction if it's not too much trouble? No worries if not, but it might speed up a fix if you are able to.
from govuk-react-jsx.
are you doing something like initialising this component without any items, but then loading in the items later e.g. as the result of an async call? So you get that first empty render happening without any checkboxes present?
from govuk-react-jsx.
Cheers for the response. This one is very edge-casey. Due to a bug in my code, the radios are put in to the DOM on page load, then instantly removed (thereby upsetting the internal JS leading to the console error). A repro is below. This is no longer an issue for me as the fix in my code prevents this initial "micro" rendering of the radios.
import { Radios } from "govuk-react-jsx";
import { useEffect, useState } from "react";
function App() {
const [status, setStatus] = useState("idle");
useEffect(() => {
if (status === "idle") {
// For error to appear in console, this delay must be tiny. If >=20ms on my machine,
// then no error.
setTimeout(() => setStatus("loading"), 5);
}
if (status === "loading") {
setTimeout(() => setStatus("loaded"), 300);
}
}, [status]);
return (
<div className="App">
{
/*
Bug in my code on the following line:
- lifecycle of status is "idle" -> "loading" -> "loaded"
- following check should be status === "loaded" to prevent radios being rendered
when status === "idle", then whipped out of DOM when "loading" (leading to console error)
then reinserted when "loaded"
*/
status !== "loading" && (
<Radios
name="r"
items={[{ reactListKey: "1", value: "1", children: "foo" }]}
onChange={() => {}}
></Radios>
)
}
</div>
);
}
export default App;
from govuk-react-jsx.
BTW - as you may have guessed we are investigating using your library (nice work!), if you search for me on the gov digital slack you'll see which department. Cheers
from govuk-react-jsx.
ah thanks for explaining the scenario @stachow. Glad that you've fixed around it for now, but I agree, it would be nice if these components were able to handle such a situation. Should be an easy enough fix - I'll try and get it into the next release when I do the [email protected] upgrade.
from govuk-react-jsx.
Hi @stachow. This is now fixed in [email protected]
from govuk-react-jsx.
Related Issues (20)
- Cannot Import "Radios" or "Checkboxes" HOT 3
- Getting an error on certain components when rendered in CRA testing environment HOT 23
- Example of test setup in govuk-react-jsx-examples
- Consider how govuk-frontend JS is imported and used to avoid bloated bundles HOT 4
- Not possible to specify reactListKey properly on tables HOT 4
- Skip Link component inside Template HOT 3
- I guess this library doesn't work with gatsby react? HOT 5
- Documentation improvements HOT 1
- Type declarations
- Header rendering bug HOT 5
- GovUK Frontend version HOT 2
- Accessibility issue when using Input with a prefix or suffix HOT 8
- Throw warnings / errors when required data is not passed
- Test with remix.run
- Inline radio with conditionals renders strangely HOT 2
- React 18 support HOT 4
- Using certain components hangs react-scripts test HOT 17
- Consider how govuk-react-jsx is packaged up as a UMD. Switch to ESM? Both? HOT 3
- Ownership HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from govuk-react-jsx.