I need to be able to reset the dom in my shadowroot. This is in the context of Elm code that needs a particular dom node to attach to.
const oldDiv = this.shadowRoot.querySelector("div");
let div = document.createElement("div");
div.setAttribute("id", "elm");
this.shadowRoot.replaceChild(oldDiv, div); // <--- fails here
this.node = this.shadowRoot.querySelector("#elm");
My replaceChild command is failing with an error similar to this (div is a <div id="elm"></div>)
What am I misunderstanding?
Related
Im struggling to define a Selector in TestCafe that clicks that YES button in the photo below
I can find and click the fist YEs button like
.click(Selector('.c-segmented-control__label').withExactText("Yes"))
However the second Yes button has the same classname so my Script cannot find it, how can I define the Selector for that one? I have tried child, nth and all but it doesnt find it.
Thanks
You can try something similar to below code
const yesButton = Selector('.c-segemented-control__label');
const count = await yesButton.count;
for(let i=0;i<count;i++){
let text = await yesButton.parent().parent().textContent //REACH UNTIL YOU GET PARENT
if(text.includes("YOURTEXT")){
await yesButton.nth(i).click()
}
}
OR You can take top to bottom approach, match you text and find child node by using .child or find
I am writing a test case to simulate the user clicking on a Textarea on a given caret position.
I tried to simulate 'click' event with a caret position using selectionStart and selectionEnd as:
it('onClick', () => {
const event = { target: { selectionStart: 3, selectionEnd: 3 } };
wrapper.find('textarea').simulate('click', event);
})
This does not work and i feel this is a incorrect way of setting the cursor position inside a element with the onCLick event.
Any suggestions on how to simulate a click event with cursor position for a textArea ..?
You can change selectionStart and selectionEnd in textarea's dom element:
it('onClick', () => {
const wrapper = mount(<MyComp></MyComp>) // <-- Note that shallow doesn't work
const textareaWrapper = component3.find('textarea') // find textarea
const textarea = textareaWrapper.getDOMNode() // get textarea's dom element
textarea.selectionStart = 3 // set cursor position start
textarea.selectionEnd = 3 // set cursor position end
textareaWrapper.simulate('click') // simulate click
...
})
Ps: you should mount your element in order to access the dom elements.
I'm trying to get a clone of a raycasted object, and move the clone of the selected object in a <div>. The raycaster works just fine, but the CSS3DObject instance (the cloned 3d Object) is not shown in the scene. I have made another renderer (namely a CSS3DRenderer), in addition to the current WebGLRenderer, and basically my css3d code consists of this:
cssRenderer = new CSS3DRenderer();
cssRenderer.setSize(window.innerWidth, window.innerHeight);
cssRenderer.domElement.style.position = 'absolute';
cssRenderer.domElement.style.top = 0;
cssScene = new THREE.Scene();
document.body.appendChild(cssRenderer.domElement);
...
thumbnail = document.querySelector('.thumbnail');
thumbObject = new CSS3DObject(thumbnail);
....
targetClone = target.clone();
thumbObject.position.copy(targetClone.position);
cssScene.add(thumbObject);
and my render loop code, pertaining to this, is:
requestAnimationFrame(update);
renderer.render(scene, camera); // WebGLRenderer
cssRenderer.render(cssScene, camera); //CSS3DRenderer
My intention is to embed the cloned object (targetClone) in the CSS3DObject (thumbObject, which in actuality is an HTML element). The console shows no error, and I cannot see any reaction to this code whatsoever (except that the div travels to the center of model!) No matter if I select the div through traversing the DOM or making a fresh element by means of createElement, nothing is being embedded in the div. I suspect that everything is behind the scene(s). Any ideas how can I achieve this, and where I'm doing it wrong?
This is the code I've found to retrieve the correct draggable element and edit it's dimensions, during the onBeforeCapture() responder. Changing dimensions during this responder is in accordance with the documentation. This seems to work in only changing the dimensions, the other problems is that I am using the renderClone method, and so the draggable is just dragging with a huge offset that is not close to the correct mouse position. Also dnd is treating the drop placeholder as if the draggable is the original large size. Is there any way to correct for this mouse position, and placeholder dimensions? I've looked into adding mouseDown/mouseUp handlers on the inner element of the draggable but that doesn't seem to work either.
const cardSize = 140;
const draggableAttr = "data-rbd-drag-handle-draggable-id";
const getAttr = (key: string, value: string) => `[${key}=${value}]`;
const draggableQuery = getAttr(draggableAttr, update.draggableId);
const draggable = document.querySelector(draggableQuery);
draggable.setAttribute("style", `width: ${cardSize}px; height: ${cardSize}px;`);
I noticed onBeforeCapture was triggering after onDragEnd (therefore resizing the draggable improperly), so I created some state to remember the last beforeCaptureResult and return if it is equivalent to the current result.
I am trying to figure out the correct types for canvas element.
Whatever I do - it does not work. I have tried all possible html element types but flow says they are incompatible. So why cant I assign canvas element to HTMLCanvasElement variable?
Any ideas?
The node parameter is a div element which contains canvas element. It is simple really. If I strip the types, everything works.
export class Graph extends Component {
draw = (node: HTMLDivElement) => {
let canvas: HTMLCanvasElement = node.firstChild
if (canvas){
canvas.width = parseInt(getComputedStyle(node).getPropertyValue('width'))
canvas.height = parseInt(getComputedStyle(node).getPropertyValue('height'))
}
let chart = new Chart(canvas, {
type: this.props.type,
data: this.props.data
})
}
render = () => (
<div ref={this.draw} className='graph'>
<canvas />
</div>
)
}
I get these errors from flow linter:
Node This type is incompatible with HTMLCanvasElement
null This type is incompatible with HTMLCanvasElement
undefined This type is incompatible with HTMLCanvasElement
Thanks
P.S. It is Inferno - not React. So the ref is a function, not a string. Just to avoid people correcting this.
It looks like HTMLDivElement is not defined in Flow internals:
https://github.com/facebook/flow/blob/v0.43.1/lib/dom.js#L2811
HTMLDivElement and HTMLCanvasElement are sibling types (both children of HTMLElement), so naturally Flow will say it's unsafe to try to cast HTMLDivElement to HTMLCanvasElement since you generally never want to do this in any typed system.
You can beat Flow's type system and get around this by casting node.firstChild to any. This is usually not recommended, but seems acceptable in this case since HTMLDivElement doesn't give you anything and you definitely know what it is.
let canvas: HTMLCanvasElement = (node.firstChild: any)
feel free to also view the flowtype.org/try link