Blog post
Angular UI Library Behaviour Change
PrimeNG’s AutoComplete refused two behaviours at once: the source code and a Proxy pattern got both.
In our Angular application we use PrimeNG as the UI library. On a new-conversation page there were three input fields (To, CC and BCC) that needed email autocomplete.
The first challenge
Our requirement said: if the user types an email address that is not in the suggestion list and presses Enter or Tab, it should still be selected.
PrimeNG’s AutoComplete component has a property called typeahead. With typeahead: true the suggestion panel shows, but Enter/Tab does not select free text. With typeahead: false Enter/Tab works, but the suggestion panel does not show. Meaning: the two behaviours are available separately, but there is no built-in way to have both together.
I searched PrimeNG’s official documentation for a solution and found none. GitHub issues, disappointment there too. So I decided to start reading PrimeNG’s source code directly.
Exploring the source, I saw that PrimeNG’s AutoComplete component updates its internal state through the onOptionSelect() method. Clicking any item in the suggestion panel calls exactly this method.
So what is the solution? I took a reference to the AutoComplete component with Angular’s viewChild API. Then I listened for Enter/Tab presses, validated the email, and triggered onOptionSelect() manually. We are changing an external object’s behaviour at runtime. In production this has to be used carefully, because a library update can change the internal method’s signature. But for this situation it was the most pragmatic solution.
The second challenge
The To field allows selecting at most one email. With multiple: false you get single selection, but the chip-style UI goes away. With multiple: true the chip UI stays, but selection is unlimited. PrimeNG’s AutoComplete has no built-in property to control a maximum selection limit.
At first I thought: on value change, check, and if there is more than one item, remove the last. But PrimeNG’s AutoComplete updates its own internal state first and emits change afterwards. Meaning: as we remove the item from the value array, the component’s internal state is still the old one. The UI does not update.
Back to the same trick of intercepting the onOptionSelect method, but this time more delicately. In ngOnInit I took the autoComplete() reference, saved the original onOptionSelect method in a variable, and set a proxy function in its place.
The proxy function’s logic: check the count of currently selected items. If the maximum limit is filled, show the user a toast notification and block the selection. If not, call the original method.
This is the Proxy pattern: a design pattern where a wrapper sits in front of the original object and can add extra behaviour. User action → proxy layer (limit check) → original onOptionSelect → PrimeNG internal state.
This pattern is used in many places in the real world: logging middleware, authentication guards, rate limiters are all essentially different forms of the Proxy pattern.