Dynamic dropdown react

[armandofreire]

Hi guys,

I'm developing an app with a Menu that renders a list of items and these items are also dropdowns. Like an hierarchic dropdown which goes opening ahead until the user finds the option he wants.

I'm currently using react for that and after the [].map, when I render the siblings, I try to apply them the new Dropdown(el, { persist : true }) , which will make them a persistable dropdown. But whenever I use it with the array resultant of my GET request, I can't make the Dropdown to work! However if I simply place the subitem component on the render method, it does work. I'll try to explain better below:

render() {
     myArr.map((key) => {
       <MenuSubitemWhichIsAlsoADropdown />
       // Wrong behavior: it does toggle the open class of this item, but closes my parent menu
     }) 

     <MenuSubitemWhichIsAlsoADropdown />
       // Correct behavior: outside the map, this item behaves as expected
}

Things to point:

• myArr is the result of a GET and it is triggered when I click the Menu (root) button. It changes the state of my component saving the GET result (which triggers a render by React's default lifecycle);
• I already tried to call thenew Dropdownmethod on both render methods (parent menu and its siblings), and even tried timeout functions and stuff, but no success;
• I already gave the MenuSubItem an ID so I could also trigger the new Dropdown whenever the renders, but still no success;
• I think that when my app changes the state when saving the result of GET, it causes the parent to lose it's references to it's siblings that's why the child does toggle the "open" class, but once they're not synced to its parent, it causes the menu to close;
• I'm using the 2.0.6 minified version from jsdelivr cdn.

Could anyone help me please? :-)

[thednp]

Make a demo on codepen so I can have a look.

[thednp]

Hey there please try to use the latest version from github and confirm if this works now. I found nesting didn't work properly and fixed it for both V3 and V4.

Thanks

[armandofreire]

Hey there, I updated the version I'm using with the latest from github, but still cant get it to work. :(

The problem occurs only if I dynamically add a nested dropdown! I think that if you use any lib you'll be able to reproduce the problem. In any case I can still post a similar version on CodePen!

EDIT: https://codepen.io/anon/pen/rwLZrE?editors=0010

[thednp]

The nesting works as far as I am concerned with the last BSN version, I think the problem is here:
https://github.com/thednp/bootstrap.native/blob/master/dist/bootstrap-native.js#L945

It stores an array of items instead of a LIVE HTMLCollection and thus a parent dropdown cannot count newly added and initialized child dropdown items.

I am open to any code suggestion you might have.

[armandofreire]

I can't tell much about the BSN core but isn't there a way for me to call the new Dropdown method for an element and BSN recursively check the children elements to recreate the hierarchic tree? I mean, by that, I could always add/remove items to the parent menu and request BSN to recreate the dropdown tree in order to make hierarchy work again. I'm not sure if that's how BSN works but afaik, for the current scenario, this would be an option.

I'm also open to any code change you request me to do, so we could debug it together if it interests BSN at all. Do you suggest another structure to compose the Menu or doing that wouldn't make any difference at all at this point? :-)

[thednp]

I can't tell much about the BSN core but isn't there a way for me to call the new Dropdown method for an element and BSN recursively check the children elements to recreate the hierarchic tree? I mean, by that, I could always add/remove items to the parent menu and request BSN to recreate the dropdown tree in order to make hierarchy work again. I'm not sure if that's how BSN works but afaik, for the current scenario, this would be an option.

No there isn't. For this kind of purpose you need to work on a fork to do your specific stuff.

[thednp]

I'll look into this and provide a workaround ok?

[thednp]

@armandofreire check this out and let me know if this works for you.

https://codepen.io/thednp/pen/pwbmyX

[thednp]

Changes are now committed to GH.

[armandofreire]

@thednp thank you so much for giving it a special attention! 😄

Well, the codepen seems to work fine and as expected: the dynamic submenus are not closing unless if I click their children! Awesome work!

But, I wasn't really able to understand what happened to that code: did you change anything to the code I sent before or the fix was made to the lib itself at the beginning of the pen? Oh, and one more question: does it support additional submenus of submenus (like that hierarchic menu I mentioned before)?

Anyway, thanks again! ❤️

[thednp]

But, I wasn't really able to understand what happened to that code: did you change anything to the code I sent before or the fix was made to the lib itself at the beginning of the pen?

I pasted the entire BSN code to the JS textarea, the codebase updated to GH some minutes ago.

Oh, and one more question: does it support additional submenus of submenus (like that hierarchic menu I mentioned before)?

It should go endlessly.

[armandofreire]

Nice! Is it going to generate a new version? Like 2.0.12 or you're going to wait for another fix to release a new build? :-)

[thednp]

I don't find this improvement to be crucial to the majority of the users, I will wait another week or so, perhaps more issues/improvements pop, I just released 2.0.11 yesterday.

The version will be indeed 2.0.12, as I also updated the package.json.