flux:phone hard-codes intl-tel-input strictMode to false, with no way to re-enable it
- Dominant language
- Blade
- Stars
- 977
- Forks
- 112
- Avg merge
- 1d 4h
- Merged PRs (30d)
- 21
Description
### What happened
`` hard-codes intl-tel-input's `strictMode` to `false` and exposes no way to turn it back on. The library's own default is `true`, and its docstring describes exactly the behaviour most phone fields want:
```js
//* Only allow certain chars e.g. a plus followed by numeric digits, and cap at max valid length.
strictMode: true
```
`flux-pro/dist/phone.module.js:2009`
The wrapper overrides it:
```js
this.iti = intlTelInput_default(this.inputEl, {
initialCountry: this.getAttribute("country")?.toLowerCase() || "",
onlyCountries: csvAttribute(this, "countries"),
countryOrder: csvAttribute(this, "country-order"),
countrySelectorMode: "OFF",
showFlags: false,
separateDialCode: false,
numberDisplayFormat: "NATIONAL",
formatAsYouType: true,
strictMode: false, // <-- here
loadUtils: () => import(this.getAttribute("utils-url") || "./phone-utils.js")
});
```
`flux-pro/dist/phone.module.js:5367-5376`
With it off, two guards never run:
- `#handleKeydownEvent` returns on its third line (`if (!strictMode) { return; }`, line 4139), so **letters can be typed into the phone field**.
- `#updateMaxCoreNumberLength` returns immediately (`if (!strictMode || !intlTelInput.utils) { return; }`, line 4443), so `#maxCoreNumberLength` stays null and **typing never stops at the country's maximum length** — the field keeps accepting digits long after the number is complete.
- `#bindStrictPasteListener` also returns early (line 4176), so pasted content is not sanitised.
### Steps to reproduce
```blade
```
1. Type `abc` into the field — the letters are accepted.
2. Type `5551234567` (a complete Turkish mobile number, which the field formats as `555 123 45 67`) and keep typing — digits keep going in past the valid length.
### Expected
An attribute to opt into the library's own default, e.g.
```blade
```
`` currently reads only `name`, `country`, `countries`, `country-order`, `utils-url` and `value`, and the Blade component's props are `countryOrder, countries, country, variant, invalid, value, name, size` — so there is no existing seam to pass this through. The bundle is compiled as an IIFE and does not expose `intlTelInput` globally, so publishing the view does not help either: the option lives in the JS, not the Blade.
### Also useful: `customPlaceholder`
Related, same shape of problem. `placeholderNumberPolicy` defaults to `POLITE`, so the field gets an example number (`0501 234 56 78` for `tr`). Many designs want a mask hint instead (`___ ___ __ __`). intl-tel-input supports this through `customPlaceholder`, which the wrapper also does not forward.
Passing `placeholder="___ ___ __ __"` works as a static workaround, but it does not follow the country selection, and it permanently disables the `POLITE` policy because `hadInitialPlaceholder` is captured once at init.
### Workaround in use
Blocking keys from outside the component, since the layer must not rewrite the value (a second formatter on the same input fights `formatAsYouType` and jumps the caret):
```js
document.addEventListener('keydown', (event) => {
const input = event.target
if (!input?.matches?.('[data-flux-phone-input]')) return
if (event.altKey || event.ctrlKey || event.metaKey) return
if (!event.key || event.key.length !== 1) return
if (!/^\d$/.test(event.key)) { event.preventDefault(); return }
// ...plus a length cap read from our own per-country mask table
}, true)
```
This works, but it reimplements what `strictMode` already does correctly, and it needs a per-country max-length table on our side that the library already has.
### Versions
- `livewire/flux` 2.20.0, `livewire/flux-pro` 2.20.0 (latest at time of writing)
- bundled intl-tel-input 29.2.3
- Laravel 13, Livewire 4, PHP 8.5
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by locating the source for the wrapper and the Blade component whose props are listed in the issue; the bundled phone.module.js references the current intl-tel-input options. Trace how attributes and props reach initialization, then verify that strict mode can be enabled and that the requested placeholder behavior is handled without breaking existing phone formatting.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, laravel, php
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 66/100