datalist-polyfill
datalist-polyfill copied to clipboard
mfranzke
Layout issue when datalist is not a sibling
Here's a strange one!
While testing in Safari 12.0.3, I noticed that when the datalist element is moved somewhere that it is not a sibling of the corresponding input, the select list hosting the suggestions is not rendered in the correct place:
https://codepen.io/anon/pen/VRpGOM
@nicholassaunders, you're right - actually, there might be other constellations as well that would prevent easily positioning the datalist elements emulating select according to the inputs position easily, but implementing a solution that would fulfill all of those quite nicely might be a little bit more complicated, so regarding keeping the polyfill simple and "clean" I wanted to only officially support the general construct of the datalist being a direct follower of the input element.
But still there might be a simple solution for this problem, if somebody might come up with one, I'd be more than happy ! ;-)
@mfranzke, thanks for the lightning-fast response. It's definitely a low-priority issue, easily solved in markup, as you pointed out. Still, I would like to revisit when time permits because I could imagine a scenario, particularly in the context of a single-page app, where the same datalist element is reused across multiple inputs and/or rendered in a different area of the app. I hope it's OK to keep the issue open as a reminder... If not, I suppose we could just call it an invalid use case and close the issue. Whatever makes sense to you!
Makes sense, I even also see your use case. But I assume that it might be a little bit more complicated to achieve the polyfill currently expects that structure for simplicity. Let's see, probably something nice pops up as a beautiful and simple solution for that.
And I don't mind leaving it open.
Probably popper.js might be a solution (optionally to include/support) for constellations like this. I'll have to investigate further.
I'd like to add that I have a use case where a single datalist is used for several list inputs. I presume this would also be broken? It's a long datalist, so I don't want to duplicate it a few dozen times.
