PrimeFaces中如何组合InputGroup与悬浮SelectOneButton组件

我希望基于InputGroup构建一款组件，包含一个可触发选择面板的按钮，效果大致如下（请忽略图中的黑色边框）：

点击InputGroup中标签为“=”的p:button（按钮A）时，弹出p:selectOneButton（选择面板B），即可根据B的选中值同步修改A的显示值与绑定值。

我已编写实现基础功能的脚本，该脚本仍有优化空间，目前已达成基础交互逻辑，欢迎大家提供改进建议：

function changeSelectedFilter(evtTarget, tgtButton) {
  const op = evtTarget.getJQ().find(':checked').val();
  const A = PrimeFaces.getWidgetById(tgtButton);
  A.value = op;
  A.getJQ().children().text(op);
}

待解决的核心问题 #

目前我遇到的核心问题是组件的调用与定位问题：当前临时采用p:tooltip实现弹出效果，但不符合交互预期，请问如何实现B的显隐控制，使其在A的上方居中展示，达到按钮原生展开的视觉效果？

从可访问性适配角度考虑，当前实现方案存在不足，使用p:menuButton/p:splitButton是更优的官方实现思路，但我需要的是仅带自定义图标（非默认下拉Chevron图标）、无文本的简洁按钮样式，现有官方组件无法直接满足该样式需求。

以下是p:splitButton、p:menuButton与预期最大宽度样式的效果对比：

使用场景 #

该组件是嵌入p:dataTable列中的数值筛选组件，当前实现采用独立排布的p:input与p:selectOneButton，分两行展示，采用悬浮弹出方案可有效优化页面空间占用。

也欢迎提供基于其他组件的实现方案建议。

内容的提问来源于stack exchange，提问作者Claudio Weiler