Ability to auto create chip when focus of PrimFaces p:chips is left

Question

I'm using a p:chips-component in my JSF-based application.

I was researching, if it is possible to modify the behavior of this component in such a way, that leaving the input-element would add any remaining text content as a new chip for pretty much the same reasons that are given in this issue, that requested the same functionality for the corresponding for primeng-component:

What is the motivation / use case for changing the behavior?
Easier for the users to use when they're only entering a single value and it may be the first time using the control. Reduces the possibility of unexpected behavior as the control then will effectively behave like an input text box.

Seeing that the issue has been resolved for primeng, it stands to reason, that it was a valid request.

Can the same result be achieved for PrimeFaces?

I've found a workaround and will post it as my own answer, because

it may help someone else who wants the same feature and
it may be considered to be a bit of a botch and someone might find a better solution.

score 0 · Accepted Answer · answered Jun 14 '18 at 13:37

It's possible to achieve the requested behavior by adding an onblur-listener (which is the aptly named counterpart to an onfocus) to the p:chips-component that simulates hitting [enter] when leaving the input-element.

By assigning a widgetVar to the p:chips-component it is possible to retrieve the actual input-element of the created widget in a client side script using PF('<widgetVar-identifier>').input[0] (which relies on a undocumented API and may therefore break in a future update). An artificial keydown-event for enter (key code 13) can then be dispatched to the input-element which triggers the default behavior of p:chips of adding the current text content as a new chip.

Here is an appropriately configured p:chipscomponent:

<p:chips
  id="chips"
  widgetVar="pf-chips"
  value="#{pringlesBean.chips}"
  onblur="
    var e = document.createEvent('Event');
    e.initEvent('keydown');
    e.keyCode = 13;
    e.which = 13;
    PF('pf-chips').input[0].dispatchEvent(e);
  "
/>

Ability to auto create chip when focus of PrimFaces p:chips is left

1 Answers1