In our application, html 'input' tag is wrapped and named as lets say 'input-app'
We are using 'input-app' in different places in same html page and I am not able to do cy.get().type() on unique input tag as 'input-app' tag has 'input' which is having same ids.
Do not want to change 'input-app' component definition. What is solution to it?
I am guessing your wrapped input-app should not have the same id on every input,but it seems we are pass that point. Are there any other div elements that are parents of this wrapped input?
cy.get('THE_PARENT_ID').find('input').type('what you need to type')
If you can't change the component can you put your own id on the element that is wrapping it. for instance
<input-app id='YOUR_ID'></input-app>
cy.get('#YOUR_ID').find('input').type('what you need to type')
Related
I want to replace a set of element say ".." in place of an element present inside a the already rendered DOM through react component.
Let's say the rendered html by React is as below
<p>This is a demo</p>
<div id='1'>Hello<div id='2'><div id='3'>I want to replace this third div with another set of element</div></div></div>
Please guide me how to make this possible. Thanks in advance!
You can use ReactDOM.render() to replace or update elements.
https ://codepen.io/vliumang/pen/XWjGVev
Or directly change the div by id:
document.getElementById("3").innerHTML = "New text!";
BR
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.
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.
I have a table component that displays at table, and a print component that displays the same table in a format ready for printing. Both reside in the same HTML page.
The print component needs some information from the table component. This information is useless to the outside controller, it just needs to get from one component to the other.
The obvious solution was to output-bind a printInfo object to the table component, and input-bind it to the print component, like so:
<table-component ... on-print-info-changed="vm.onPrintInfoChanged(info)"/>
<print-component print-info="vm.printInfo"/>
I set printInfo in onPrintInfoChanged.
while this works, it doesn't seem right. Since both components already rely on each other, I'd much rather do something like this:
<table-component .../>
<print-component table="<ref to table-component>"/>
That way the controllers doesn't need to know anything about the dependency between the two components, except that there is one.
The question is - how do I supply the reference to the table component? I can get the table controller's element on the page, but how do I get the component's controller from it?
I found some old (and sometimes contradicting) answers, but they were all relevant to old versions of Angular, before anybody used components or ES 6.
I'm new to Angular and I have the following problem.
I'm trying to create a component that can be active. I currently set it up so it detects if an attribute called active exists and sets its internal state accordingly.
<page active page-id="page-1"></page>
The problem emerged when I wanted to remove the active state. How should I go about it? Should I switch to css classes? Or maybe use a directive?
This seems a little 'hacky' but, first you need to get the element somehow and access the attribute Map directly and just remove it like,
HTML
<page active page-id="page-1" id="page_one"></page>
Dart
querySelector('#page_one').attributes.remove("active");
https://api.dartlang.org/apidocs/channels/be/dartdoc-viewer/dart:html.Element#id_attributes