I'm exploring AG Grid and like what I see in the demo apps and my little demos. Am am doing a small POC integration with our application, and I started to receive a javascript error from React-DOM with an "Invalid aria prop".
react-dom.development.js:61 Warning: Invalid aria prop `aria-description` on <div> tag. For details, see https://reactjs.org/link/invalid-aria-props
at div
at HeaderCellComp (http://localhost:3000/redacted/static/js/bundle.js:110424:25)
at div
at HeaderRowComp (http://localhost:3000/redacted/static/js/bundle.js:110869:36)
at div
at div
at HeaderRowContainerComp (http://localhost:3000/redacted/static/js/bundle.js:111018:20)
at div
at GridHeaderComp (http://localhost:3000/redacted/static/js/bundle.js:110335:20)
at div
at GridBodyComp (http://localhost:3000/redacted/static/js/bundle.js:109884:20)
at TabGuardCompRef (http://localhost:3000/redacted/static/js/bundle.js:111683:24)
at div
at div
at GridComp (http://localhost:3000/redacted/static/js/bundle.js:110118:20)
at div
at AgGridReactUi (http://localhost:3000/redacted/static/js/bundle.js:108709:24)
at AgGridReact (http://localhost:3000/redacted/static/js/bundle.js:108170:43)
We are using React 17.0.2.
After looking into this, React 17.0.2 doesn't recognize "aria-description" as a valid aria property and it has only been fixed in React v18 (https://github.com/facebook/react/issues/21035 and https://github.com/facebook/react/pull/22142). It appears that Facebook is concerned with misspelling attributes, so they have chosen to added an explicit check.
If AG Grid v29 is compatible with React 17 ("peerDependencies": { "ag-grid-community": "~29.0.0", "react": "^16.3.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0" }), Is anyone from AG Grid aware of this javascript error?
Does anyone know who to resolve this, other than the obvious of upgrading to React 18?
Searching for options, without upgrading the React version.
Related
nextjs + material UI
Im sure its something basic that Im overlooking, but Im trying to override mui styles with css modules. The accepted method seems to be wrapping the component tree in a StylesProvider component and passing it a injectFirst attribute. When I do this though it generates the error
*Error: Element type is invalid: expected a string (for built-in components) or*
This is using nextjs. Package.json looks like:
#emotion/cache 11.4.0
#emotion/react 11.4.0
#emotion/server 11.4.0
#emotion/styled 11.3.0
#material-ui/core 5.0.0-beta.0
clsx 1.1.1
next 11.0.1
prop-types 15.7.2
react 17.0.2
react-dom 17.0.2
There is a codesandbox where you can see the error live and examine the code. Any ideas gratefully accepted.
Material UI began using emotion as styling library in v5, so as per the migration guide, the correct component to use is StyledEngineProvider. Like so:
import * as React from 'react';
import { StyledEngineProvider } from '#material-ui/core/styles';
export default function GlobalCssPriority() {
return (
<StyledEngineProvider injectFirst>
{/* Your component tree. Now you can override Material-UI's styles. */}
</StyledEngineProvider>
);
}
I get troubles while trying to put a simple SideBar with AG Grid with the latest versions of angular and ag-grid as of today (9.1.3 and 23.0.2).
My simple grid conf : sidebar = "filters"
Dependencies to necessary enterprises modules are present.
The panel is appearing but without any column name and I get the following error in console:
core.js:6210 ERROR TypeError: element.setAttribute is not a function
at Function.push../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.Utils.addCssClass (ag-grid-community.cjs.js:1396)
Does anyone have an idea ? Some conflicts between dependencies ?
I'm trying to allow an author to change the heading size in the markup based on a dropdown in the dialog with the options "h1, h2, h3, h4". If none is selected, it should default to h2.
I'm trying to do this with ternary code like I would for dynamic classes or content, but when I do this it just prints the code out on the page. The result of the following should be <h2> Heading </h2> or have h2 replaced by a dialog selection
<${properties.headingSize ? properties.headingSize : 'h2'}>
${properties.heading}
</${properties.headingSize ? properties.headingSize : 'h2'}>
The result of this code in Inspect Element is
<${properties.headingSize ? properties.headingSize :="h2" }>Heading <!--${properties.headingSize-->
Is this not a recommended way to accomplish dynamic markup? Or is there a way to get the ternary to work correctly?
The recommended way to solve your problem is to make use of the data-sly-element statement to replace your element name. Sample usage is shown below.
<h2 data-sly-element="${properties.headingSize || 'h2'}">${properties.heading}</h2>
For more information on the acceptable values for data-sly-element as well as the available block statements that can be used in HTL, kindly refer this official documentation
I´m using TinyMCE v4.7.9
When working with templates (https://www.tinymce.com/docs/plugins/template/)
I would like to insert the templates last in content editor, not where i stand, is there some hack to do that? Can i add a button "insert after" on dialog?
Now i'm stuck in some other P tag and my templates are DIVs.
Regards
After some trial and error and no way to find an answer to this, i found a work around.
I start the templates with <div data-insertafter
in setup on event "BeforeSetContent":
editor.on('BeforeSetContent', function (e) {
if (e.content.indexOf("<div data-insertafter") === 0) { //okej, insert after
editor.setContent(editor.getContent() + '<div class="row"></div>');//add an element to in the end
editor.selection.select(editor.getBody(), true);//select al
editor.selection.collapse(false);//set focus on that last div by inverting selection
e.content = e.content.replace("data-insertafter", "");//remove
}
});
You can certainly modify the template plugin to do that...each plugin ships in a minified and non-minified version so you can just modify the non-minified version to address this need.
I'm trying to implement the new swiper from the 1.2 ionics version and Im having a hard time.
I'm trying to create a nested swiper with a dynamic name ( inside the sliders attribute I guess - HTML line 20 to create it and JS line 59 to watch it).
The main issue is that Id like to add/remove some slides from the nested swiper.
http://codepen.io/anon/pen/pgVMqw?editors=1010
Do you have any idea ?
Thanks a lot !
HTML :
<ion-slides id="sliderPerson-{{$index}}" options="options2" slider="data.sliderPerson">
You should be able to use $scope.data.sliderPerson.removeSlide($index) and $scope.data.sliderPerson.append(slides).
You might have to use $scope.data.sliderPerson.update() to manually update the slider afterwords.
Reference:http://www.idangero.us/swiper/api/