We Keep Coding

react-native ios modals order

In react-native app I have a component which show some data. In this component there is modal, that shows on button press with some detailed data. And in this modal I have a button to show another modal with some specific data.
Something like this:
MainComponent->ModalWithSomeColorSettings->ModalWithColorPickerForCurrentElement.
In Android version threre is right order by show on modal by overlap another by default. And if I open one modal, that shows. If in that modal press button to show second modal, that modal shows and overlap previos. If I close last, there is still first one modal on the screen.
But in ios version if I open first modal, then open another, second modal did not show itself. Then if I close first modal, I can see second modal on screen. It's look like order multiple modals in android is different to ios order. First overlap second, instead second overlap first.
Did anyone know is there possible or not to change modals order in ios from react native? Or I need create component to show some specific data instead do it in modals? It's more helpful to stay with modals with my case, because in main component and first modals I have some fetch data from server and don't want to download this data every time when rollback to main component.

Materialize stepper back button issue on double click

I am using Materialize Stepper in my project to display multi forms, everything is working fine and i noticed that when double click on back button all the content become blank and we have to refresh the page.
'''https://codepen.io/flist/pen/mqXemY'''
Please check the above codepen page and when you click next button and from second step if you tried to double click on back button all content will be washout.
If anyone can check and suggest some solution that will be great help.

Vuetify v-btn in v-bottom-navigation stays active when not pressed

I am having an issue with a button in my bottom nav in Vuetify. I have defined a bunch of buttons as routes (I am using Nuxtjs), so a button will be active if I am on that page.
There is a button in the bottom nav bar that is not a route though, and it exists to activate a v-navigation-drawer. When I click this button, the drawer slides out fine. When I click outside the drawer to get it to slide back, though, both the button of the page I am on and the button that activates the drawer are active. I want the button that activates the drawer to never be active.
Visual--
I am on the app's home page.
Here is what the bottom nav looks like before clicking the button for the v-navigation-drawer
Here is what the bottom nav looks like after I close the v-navigation-drawer. The button furthest to the right is what activates the navigation drawer, and it should never remain active after I close the drawer. Yet it does, and I need to click another button to deactivate it.
I have tried many things suggested on other questions here to fix this, including but not limited to the following: defining a custom active class for this button, using the exact prop, and using a watcher to change the value of the active value in the nav bar. None of these things have worked.
Here is the code where the issue is. I have removed the irrelevant buttons, keeping only the home and profile buttons (the profile is the problem one which stays active undesirably):
<v-bottom-navigation
app
fluid
grow
color="primary"
class="d-flex d-sm-none"
>
<v-btn
value="home"
to="/home"
nuxt
exact
>
<v-icon>
mdi-home
</v-icon>
</v-btn>
<v-btn
value="profile"
exact
#click="showProfileNavDrawer"
>
<v-icon>
mdi-account-circle
</v-icon>
</v-btn>
</v-bottom-navigation>
The profile button stays active after I close the navigation drawer it opens (while another button is active at the same time due to vue's router) and I can only deactivate the profile button by clicking another button.
How might I eliminate this issue?
EDIT
I think I figured out what was wrong, for any people coming from a search engine. It appears to be a limitation of Vuetify's bottom nav. It is intended specifically for navigation and since this button was on the bottom nav bar without an assigned route (all it did was slide out a navigation drawer, no route change), it associates itself with the current route temporarily until another route is navigated to and the bottom navigation bar's state is modified. This interpretation may be wrong, but it seems to match the behavior.
I was unable to fix the problem though due to my low knowledge of CSS (first time building a website, my day job is mostly data engineering) so I just changed my webapp's design. Apologies for anyone who was hoping for an answer :(

#genp according to the docs for v-btn, exact will match every route if passed in as a prop but no route specified. Could your btn be matching for the current route and so triggering it's active state? How about you remove the exact prop from the button in the nav. Does anything change?
Docs here.

Dropdown closes on clicking scrollbar of dropdown in a modal but works fine when used outside of a modal in React?

I created an autocomplete component and when I use it in modal, the dropdown closes on clicking scrollbar(onBlur event of input gets fired) but when I use the same component outside of modal, scrolling with scrollbar works fine.
I am not able to find the cause of the issue. So please help!!
This is the code-sandbox link
(To reproduce the issue first use scrolling with scrollbar on main page, then open add item modal and use second input field in it which is same autocomplete component).

Kendo Panel Bar not working for alternative load of the panel

I have a requirement where i have to show a popup on click of a button and in the popup i have to show 2 panels. But on alternate click of the button when the popup appears, nothing happens on clicking the panel. I had faced a similar type of issue where a grid was not loading properly on alternate click of the tab where it was present. I just emptied the grid using $("#GridId").empty before every load and it worked. But i don't understand how to implement that concept in case of panel. I am using Kendo panels and grids. I am setting the panel items using <ul> <li> tags. It's working when i give expandMode: "single" for the panel bar but my requirement is to show all the panel dropdowns. Can someone help resolve this issue?

I solved the issue by adding this line $("#Gridname").kendoPanelBar() in the $(document).ready function of the js file