Attribute removed sometimes when hovering over Measurement Type input

[robyngit]

Describe the bug When there is an empty attribute in the attribute editor, and the user hovers of the Measurement Type annotation element, the empty attribute gets removed from the view.

To Reproduce Steps to reproduce the behaviour:

1. Edit/create a dataset
2. Click describe to edit attributes
3. Add attribute
4. Without adding any content, hover of the Measurement Type input
5. See the new attribute suddenly disappear from view

Expected behavior

Attrs shouldn't disappear randomly

Screenshots

https://github.com/user-attachments/assets/2275d00c-e790-4ade-9cdf-e68935d9687b

Additional context

• In EntityView, we trigger an action on the onHide event of the (jquery) element, which is a bootstrap modal. This event is triggered when the modal is closed/hidden.
• The action we trigger checks for empty models and removes them. We do this so the attribute editor reflects what will be included in the EML if the user opens the modal to edit it again (empty attributes get removed during serialization).
• EntityView contains EMLMeasurementTypeView
• Something in the EMLMeasurementTypeView seems to be triggering a bootstrap "hidden" event (this.$element.trigger("hidden"),) which must be propagating up the the main EntityView element.
• The stack trace indicates that the hidden event is happening during a mouse enter/leave event:

The hidden event on the EMLMeasurementTypeView appears unnecessary so we should see if we can stop that listener from happening. We should also see if there's someway to listen to "hidden" event on EntityView element ONLY, and not any sub-views.

Came across this issue while working on #2652. (Very difficult to debug where the model removal was coming from!)

[robyngit]

The event that bubbles up begins is in the NCBO tree widget that we use for the older annotation view. This is a third party widget developed around 2008.

The unexpected "hidden" events bubbling up from components within modals is a known bug in bootstrap 2.x (~2013) and the work-around involves manually defining the hidden behaviour...

Potential solutions include rewriting the event as explained above; editing our version of the NCBO tree widget to avoid the event occurring or bubbling up; or replacing the EMLMeasurementView view with the newer BioOntologySelectView.

Using the BioOntologySelectView would make the most sense, as it is more flexible (can use different ontologies) and has an easier UI to navigate. We could then deprecate the NCBO tree widget and remove it from our codebase.

While this fix is relatively minor, it's an example of how our reliance on legacy front-end tooling continues to surface bugs and slows down our progress in adding new features. We could avoid this overhead by eventually migrating to a more modern front-end stack, e.g. https://github.com/NCEAS/metacatui/issues/2029, https://github.com/NCEAS/metacatui/issues/414, https://github.com/NCEAS/metacatui/issues/2193, https://github.com/NCEAS/metacatui/issues/2194

[robyngit]

Was able to fix by simply checking that the "hidden" event's target element was the view element itself, and not a nested element (e.g. from the NCBO tree). I still think it's a good idea to replace the NCBO tree widget with the Bioontology Select View so I'll make a separate issue for that feature.