Over the last couple of days, I've been trying to implement navigation tabs using OOUI\TabPanelLayout, OOUI\PanelLayout and OOUI\IndexLayout in PHP. My setup is a custom extension and the tabs are intended to be rendered on pages of a custom MW namespace. However, both panels are shown, stacked vertically, and clicking any of the headers has no effect on the appearance of the panels, whether framed or frameless. The browser’s inspector shows what looks like some unprocessed json data still being attached to the data-ooui attribute. Also, there’s a couple of seconds delay in page load before OOUI finally kicks in and the plain HTML gets transformed.
I could go into a lot more detail here, but the issue here is that what is required to make things work, namely infusion, is not being triggered. Wikimedia’s own OOUI demo shows that the same broken behaviour applies unless you hit the ‘Infuse’ button at the top. I had already made each widget infusable and also added the setInfusable function at the end, to be on the safe side, but it would be helpful to know what other steps need to be taken.
The documentation on this website and on the Wikimedia site does not suggest solutions, AFAICS. Should something like https://github.com/wikimedia/oojs-ui/blob/master/demos/infusion.js be included as a dependency? What do you recommend we should do? Is it advisable to use OOUI at all?