As discussed in #22422 the current approach of injecting a backdrop (to work around iOS' broken event
delegation for the click event) has annoying consequences on touch-enabled laptop/desktop devices.
Instead of a backdrop <div>, here we simply add extra empty/noop mouse listeners to the immediate children of <body> (and remove them when the dropdown is closed) in order to force iOS to properly bubble a click resulting from a tap (essentially, method 2 from https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html)
This is sufficient (except in rare cases where the user does manage to tap on the body itself, rather than any child elements of body - which is not very likely in an iOS phone/tablet scenario for most layouts) to get iOS to get a grip and do the correct event bubbling/delegation, meaning the regular click event will bubble back to the <body> when tapping outside of the dropdown, and the dropdown will close properly (just like it already does, even without this fix, in non-iOS touchscreen devices/browsers, like Chrome/Android and Windows on a touch laptop).
This approach, though a bit hacky, has no impact on the DOM structure, and has no unforeseen side effects on touch-enabled laptops/desktops (nor non-iOS mobile/tablet devices). And crucially, it works just fine in iOS (tested on iPhone and iPad)
Additionally, this PR removes the styles associated with the now unnecessary dropdown backdrop, and updates the documentation (possibly in far too much "under the hood" detail?)