Enterprise: Toolbar: A toolbars inserted into the DOM prior to another toolbar are assigned the same id as the latter

[scott-newman-infor]

See toolbar.js:

https://github.com/infor-design/enterprise/blob/3c69349a00d3ab23f0e68a3be3b22f700c9fda17/src/components/toolbar/toolbar.js#L111

This id is merely based on sequence in the DOM. If we dynamically insert a toolbar before an existing toolbar, the ordering changes.

Recommend allowing developer to pass in an id, or else find another mechanism such as random numbers or ever-increasing count.

We modified our source to this effect (pass an id) and confirmed the method works.

Without a stable id, the resize eventing for toolbars does not get initialized and destroyed at proper timings.

[clepore]

We appreciate your submission! Unfortunately, we are unable to make any progress on the issue until the description is in the structure of one of the templates (bug request or feature request) found after clicking the "New Issue" button on the repo's Issues page.

[scott-newman-infor]

Description: See above. In dynamic apps we sometimes insert a toolbar in the DOM as the steps below show. The toolbar window resize event however gets confused as to which toolbar it refers to.

Version: 4.14.0

Steps to reproduce:

1. Go to https://design.infor.com/code/ids-enterprise/latest/demo/components/toolbar/example-no-title-icon-buttons?font=source-sans
   (Notice that the toolbar responds to window resize events and flows buttons in and out of the more menu)
2. In browser console, execute:
   $("#maincontent .toolbar").before($("#maincontent .toolbar").get(0).outerHTML)
   (we see another toolbar inserted before the existing oen)
3. In browser console, execute:
   $("#maincontent .toolbar:first-child").toolbar()
   (Adjust width of the browser and notice that now only the top toolbar responds to resize events)

Expected behavior:
We should see the newly inserted toolbar behave as the original one did, responding to browser resize

Platform: any

[tmcconechy]

As a note the toolbar component is being phased out in favor of the flex-toolbar which is its better replacement. We may not fix any further toolbar issues but its kept in for backwards compatibility until folks can update.. Wondering if this occurs there as well?

[scott-newman-infor]

Thanks for the update. We'll keep this in mind next time we upgrade IDS. Have not confirmed if the issue would still occur in the flex toolbar.

[tmcconechy]

Will descope this for now in favor of FlexToolbar as we will only be changing that at this time.

[tmcconechy]

Not sure if you deleted a comment but the task to add Toolbar Flex docs is in the current sprint https://github.com/infor-design/enterprise/issues/4004 if you have some specific questions or things you want to see please add a comment there 👍

[tfavorite]

Sure, thanks @tmcconechy - there are a couple of other issues we had with Toolbar that we never got around to reporting issues for - would it be better to do that via the standard issue reporting process, or in that thread? Or should we give the ToolbarFlex a try first and see whether it renders those problems moot?

[tmcconechy]

Lets keep https://github.com/infor-design/enterprise/issues/4004 to documentation needed not "bugs". So if its something you cant figure out and would like explaination or docs around add it there. But if its a bug lets make issues for them, you can group them together if they are somewhat similar in one issue.