Filament Phone Input Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require ysfkaya/filament-phone-input
   php artisan filament:assets
   php artisan filament-phone-input:install
   

2. Basic Usage in Forms:

   use Ysfkaya\FilamentPhoneInput\Forms\PhoneInput;
   
   PhoneInput::make('phone')
   

3. Basic Usage in Tables:

   use Ysfkaya\FilamentPhoneInput\Tables\PhoneColumn;
   
   PhoneColumn::make('phone')
   

4. Basic Usage in Infolists:

   use Ysfkaya\FilamentPhoneInput\Infolists\PhoneEntry;
   
   PhoneEntry::make('phone')
   

First Use Case

Replace a standard TextInput for phone numbers in a user profile form:

public static function form(Form $form): Form
{
    return $form->schema([
        TextInput::make('name'),
        PhoneInput::make('phone') // Replaces TextInput for phone
    ]);
}

Implementation Patterns

Common Workflows

1. Form Integration

• Default Setup: Use PhoneInput::make() directly in form schemas.
• Validation: Chain validateFor() to enforce phone number rules:

  PhoneInput::make('phone')
      ->validateFor(country: 'US', type: libPhoneNumberType::MOBILE)
  

• Country Separation: Store country code separately:

  PhoneInput::make('phone')
      ->countryStatePath('phone_country')
  

2. Table/Infolist Integration

• Display Formatting: Control how numbers appear in tables:

  PhoneColumn::make('phone')
      ->displayFormat(PhoneInputNumberType::NATIONAL)
  

• Country Column: Link to a separate country column:

  PhoneColumn::make('phone')
      ->countryColumn('phone_country')
  

3. Dynamic Configuration

• Conditional Options: Use closures for dynamic settings:

  PhoneInput::make('phone')
      ->onlyCountries(fn () => ['US', 'GB'])
  

• GeoIP Lookup: Customize IP-based country detection:

  PhoneInput::make('phone')
      ->ipLookup(fn () => request()->ip())
  

4. Internationalization

• Locale Support: Set language for UI elements:

  PhoneInput::make('phone')
      ->locale('tr')
  

• Custom Translations: Extend validation messages in validation.php.

Integration Tips

Filament 3.x Compatibility

• Works seamlessly with Filament 3.x forms, tables, and infolists.
• Follow Filament’s component registration patterns (e.g., getFormSchema()).

Laravel Phone Integration

• Leverage Laravel Phone methods for validation/storage:

  $phone = Phone::make($request->phone);
  $phone->formatE164(); // Use Laravel Phone's utilities
  

Asset Management

• Published assets include CSS/JS for intl-tel-input. Ensure:

  php artisan filament:assets
  

  is run after installation.

Gotchas and Tips

Pitfalls

1. Validation Errors

• Issue: Number requires a country to be specified or Number does not match the provided country.
• Fix: Set a defaultCountry or ensure stored numbers include area codes:

  PhoneInput::make('phone')
      ->defaultCountry('US')
  

2. Country Code Separation

• Issue: Country code not saved when using countryStatePath.
• Fix: Ensure the state path column exists in your model’s $fillable.

3. GeoIP Lookup Conflicts

• Issue: disableLookup() not working.
• Fix: Verify no middleware/filters override the IP detection.

4. Form Submission Quirks

• Issue: Phone number not validating on submit.
• Fix: Ensure validateFor() is chained before required() if using both.

Debugging Tips

1. Inspect Raw Input

• Log the raw input to debug formatting issues:

  $this->form->fillableData['phone']; // Check raw value
  

2. Check Asset Loading

• Verify assets are published:

  php artisan filament:assets
  

• Inspect browser console for 404s on /vendor/ysfkaya/filament-phone-input/....

3. Validation Messages

• Extend validation.php for custom messages:

  'attributes' => [
      'phone' => 'phone number',
  ],
  'custom' => [
      'phone' => [
          'required' => 'The :attribute is required.',
      ],
  ],
  

Extension Points

1. Custom Options

• Pass additional intl-tel-input options:

  PhoneInput::make('phone')
      ->customOptions(['preferredCountries' => ['tr', 'us']])
  

2. Dynamic Country Lists

• Fetch countries from an API:

  PhoneInput::make('phone')
      ->onlyCountries(fn () => Country::query()->pluck('code')->toArray())
  

3. Override Templates

• Extend Blade templates for custom UI:

  // Publish views first:
  php artisan vendor:publish --tag=filament-phone-input-views
  

  Then modify resources/views/vendor/filament-phone-input/....

4. Testing

• Mock Laravel Phone for unit tests:

  $this->partialMock(Phone::class, function ($mock) {
      $mock->shouldReceive('parse')->andReturn(new PhoneNumber());
  });
  

Pro Tips

1. Performance

• Disable GeoIP lookup if unnecessary:

  PhoneInput::make('phone')
      ->disableLookup()
  

2. Mobile Optimization

• Enable fullscreen popup for better UX:

  PhoneInput::make('phone')
      ->useFullscreenPopup()
  

3. Accessibility

• Hide flags for screen readers if needed:

  PhoneInput::make('phone')
      ->showFlags(false)
  

4. Localization

• Use i18n for multi-language support:

  PhoneInput::make('phone')
      ->i18n(['tr' => 'Türkçe'])