Develop Reference

How to scroll a section to the top in Chakra Modal?

this is what I am trying to do
My main page has 4 buttons
On click of each button, the modal should open and the content for that section should be at the top. For example, click "All Nutrients" and the modal should open where the content at the top should be the Box that contains NutrientFilterOptions.
My attempt is available at https://codesandbox.io/s/modest-edison-wz8qr?file=/src/App.tsx
What happens now?
When I click on "All Nutrients", modal opens but the Nutrient section is not scrolled to the top.
Note: At this time, the code is only connected using ref for Nutrients.
Any help in educating me how I can achieve my goal is greatly appreciated.
Thank you

I have never seen chakra-ui so please excuse me for not completely solving this problem
I managed to get the desired list to scroll into view with this modification to NutrientFilterOptions.tsx
export const NutrientFilterOptions = () => {
useEffect(() => {
const ele = document.querySelector("#myNutFilter");
if (ele) ele.scrollIntoView();
}, []);
return (
<div id="myNutFilter">
What I am doing is giving the element an id instead of using useRef, although useRef may be ideal in this situation.
I am using useEffect because I want the code to execute after the component renders.
After the component renders I have vanilla js to first check that the element exists (isShown) then I scroll it into view if it does exist.
I would like to add that this does not check how the list was initially shown. You would need a state that keeps track of what opened the options menu, and only scroll if that the source was correct. I would use prop drilling or redux to handle the source of options opening.
hopefully that helps!

Why does v-dialog reset another element's visibility toggle?

Been hacking at this for days, hopefully there are some Vuetify wizards around.
Here's the situation: I have rendered a set of v-expansion-panels and if one of them is expanded, it also shows an arrow button (display: none is toggled by clicking on v-expansion-header). Upon that button click, my aim is to show a dialog.
Problem: Once dialog is prompted with the button click, the button display toggle is reversed. It disappears as soon as you click on the button to prompt a dialog, and appears again once the v-expansion-panel is collapsed.
How it should be: The arrow button should always be visible as long as the v-expansion-panel is expanded, regardless of whether it is clicked to see the dialog or not.
Here's a codepen replicating and illustrating the problem.
Any thoughts would be much appreciated!

It has to do with using style directly on the element.
Use v-show instead of toggling the styles by hand:
<v-btn v-on="on" class="ml-1" width="36px" v-show="expanded[i]">
Update your data to hold an array for the pannels
data () {
return {
dialog: false,
expanded: [false, false, false]
}
}
And update your toggleMoveUp method to update expanded instead of using HTML ids.
toggleMoveup(i) {
this.$set(this.expanded, i, !this.expanded[i])
this.show=true;
}
Notes:
You need to use Vue.set when updating an array
You should not rely on HTML ids, if you use your components in more than one place at a time you'll run into multiple ids.
Why didn't your approach work? I'm guessing that vuetify is updating an element's style property, but doesn't take care of retaining already existing values so your display:none gets erased.

Posting a solution a colleague helped with. This also works with any array size (which is more of a real life scenario in dynamic webapps). It implements a created() lifecycle hook that adds an expanded: false property to each element in the array, which we can use to keep track of the expand state and toggle the button visibility. Here's the codepen.
However, in general, it is recommended in this scenario to actually make an independent component <v-expansion-panels /> and in the parent component actually loop the components. That would solve the state problems on its own already, since each component maintains their own state in their scope.

How to totally disable elements events?

I'm using the compound model and the cytoscape-compound-drag-and-drop extension to let the user manually reorganize the layout by grouping some nodes together and moving whole groups easily.
Now I want a button to toggle the display of these groups "boxes", but keep displaying all non-parent nodes.
I first tried hide() on parent nodes, but it also hides the children, so I switched to dynamically applying a class which specifies display:hidden.
It seemed to do the trick, but still the hidden box can be clicked and cytoscape default "visual feedback" for click applies, showing off the area where the hidden box still lies.
I tried plenty of things that didn't work:
- disable events from my hidden style class: tried events:no. Should I report this as a bug ?
- .ungrabify().unselectify().panify().lock()
- on click: destroy the event object
- set e.target._private.active = false
I tried a nasty hack: setting e.target._private.position = {}
The event is still fired, but destroying the position sucessfully prevents the "visual feedback" from happenning, my box effectively stays "hidden".
But still the event occurs on the wrong target: the box, not on the empty space of the cytoscape container. I can keep hacking and leave with it, but isn't there a simpler solution to ?
Is it possible to simply and truly pass through hidden parent nodes events ?

You haven't used events properly.
cy.$('node').forEach(node => {
node.events = 'no'; // will not work
});
The following does work, and you can also restore events whenever you want.
cy.$('node').forEach(node => {
node.style('events', 'no');
});

Ui-grid with uib-popover as a cellTemplate

I'm trying to use a uib-popover from ui-bootstrap in the ui-grid, but when I click in the popover, the "click" events goes to my grid. I set a Plunker with this problem: https://next.plnkr.co/plunk/aFbYIYsKAD3puSt6
The first column (Name) is the one with the cellTemplate.
If you click in the icon, a popover will appear, and the grid doesn't allow you to click in the Input that I put there, only if you click in the Label, but even so, it's still pretty buggy.

I fixed it.
It was pretty simple actually, you just need to set the "allowCellFocus" to false in the colDef of the grid
Updated Plunker:
https://next.plnkr.co/plunk/FSZXUViAhu8CMWaT

Items in Sencha Touch Carousel disappearing

I'm currently building an application using Sencha Touch. We have a certain Carousel on a page that contains multiple items. Upon clicking a button on a different panel, certain items are added and removed to the panel.
The problem: all works as planned for the first click, but clicking upon clicking the same button again, the functionality stops working and the Carousel display turns blank, with none of the items visible.
Below is the handler for the buttons that change the content of the carousel itemsCarousel. The function adds itemPanels[ b.getBadgeText() ] to the itemsCarousel's items. For the first four clicks or so, this works great. After around then, when I click a button, all the items in the Carousel vanish, and I cannot add or remove any more content, even invoking the Carousel manually from the console.
handler: function(b, e) {
itemsCarousel.insert(1, itemPanels[ b.getBadgeText() ]);
itemsCarousel.doLayout(); itemsCarousel.doComponentLayout();
itemsCarousel.setActiveItem(1);
itemsCarousel.remove(0, false);
}
Things I have attempted:
Changing the order by inserting the item at slot 0, setting 0 active, and then removing 1.
Putting javascript breakpoints on each of the lines, seeing where the carousel goes blank. Sometimes it occours at the .insert() statement, sometimes at the .remove().
Doing all this manually, from the console.
Tweaking the autoDestroy parameter in the .remove() call (as seen above) and in the declaration of itemsCarousel.
If you need more code I can post whatever you think may be relevant, I didn't want to pollute this thread with excess code. Thanks for your help!
Edit: If anyone knows another way to reproduce the same functionality, I am open to that as well. I am thinking perhaps creating a dummy holder Container with one item, a carousel, and deleting the entire carousel and re-adding a brand new (with the new items) one upon the button click?

Well, I figured out how to reproduce the functionality using a different method.
I built multiple carousels, each containing the panels I wanted, and then had a root panel that simply sets the active carousel based on button presses. For example, the hierarchy looks like this now:
rootPanel
{
carousel[0]
{
panel1
panel2
}
carousel[1]
{
panel3
panel4
}
...
}
and I perform rootPanel.setActiveItem(x) to display the new carousel.