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
   

   • Run npm install and npm run build if assets aren't auto-published.

2. First Use Case: Add to a Filament form:

   use Ysfkaya\FilamentPhoneInput\Forms\PhoneInput;
   
   PhoneInput::make('phone')
       ->required()
       ->label('Contact Number');
   

Where to Look First

• README.md: Focus on the Usage section for method signatures and examples.
• Validation: Check the Validation subsection for validateFor() rules.
• Formatting: Review PhoneInputNumberType constants (E164, NATIONAL, etc.) for display/input formats.

Implementation Patterns

Common Workflows

1. Basic Form Integration:

   public static function form(Form $form): Form {
       return $form->schema([
           PhoneInput::make('phone')
               ->inputNumberFormat(PhoneInputNumberType::E164)
               ->displayNumberFormat(PhoneInputNumberType::NATIONAL),
       ]);
   }
   

2. Separate Country Code Storage:

   // Form
   PhoneInput::make('phone')
       ->countryStatePath('phone_country_code');
   
   // Table Column
   PhoneColumn::make('phone')
       ->countryColumn('phone_country_code');
   

3. Dynamic Default Country:

   PhoneInput::make('phone')
       ->defaultCountry(fn () => request()->ip() ? 'US' : 'GB');
   

4. GeoIP Lookup with Custom Logic:

   PhoneInput::make('phone')
       ->ipLookup(fn () => session('user_country') ?? 'TR');
   

Integration Tips

• Validation Rules: Extend Laravel Phone’s rules (e.g., phone:us|required|mobile).
• Localization: Use i18n() to override default messages:

  PhoneInput::make('phone')
      ->i18n([
          'placeholder' => 'Enter your phone number',
          'invalidNumber' => 'Invalid phone number format',
      ]);
  

• Conditional Rendering: Combine with Filament’s visible()/hidden():

  PhoneInput::make('phone')
      ->visible(fn ($record) => $record->isInternational());
  

Gotchas and Tips

Pitfalls

1. Missing Default Country:

   • Error: Number requires a country to be specified or Number does not match the provided country.
   • Fix: Always set defaultCountry() if storing raw numbers without country codes:

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

2. Validation Translation:

   • Error: Missing validation.attributes.phone in resources/lang/en/validation.php.
   • Fix: Add:

     'phone' => 'Phone number',
     

3. Country Code Separation:

   • Gotcha: Forgetting to update both countryStatePath() in the form and countryColumn() in the table/entry.
   • Fix: Use a trait or helper method to ensure consistency.

4. Asset Conflicts:

   • Issue: intl-tel-input CSS/JS not loading.
   • Fix: Run php artisan filament:assets after installation or manually include:

     @vite(['resources/js/app.js', 'node_modules/intl-tel-input/build/js/utils.js'])
     

Debugging Tips

• Inspect Raw Input: Use dd($record->phone) to verify stored formats (e.g., +12125551234 vs 2125551234).
• Check Console: Open browser dev tools to debug intl-tel-input errors (e.g., missing locales).
• Test Validation: Validate manually with:

  $phone = Phone::parse('+12125551234', 'US');
  $phone->isValid(); // true/false
  

Extension Points

1. Custom Options:

   PhoneInput::make('phone')
       ->customOptions([
           'separateDialCode' => true,
           'initialCountry' => 'auto',
       ]);
   

   • Refer to intl-tel-input docs for available options.

2. Override Templates:

   • Publish views with php artisan vendor:publish --tag=filament-phone-input-views and modify:
     • resources/views/vendor/filament-phone-input/phone-input.blade.php.

3. Extend Validation:

   use Propaganistas\LaravelPhone\Rules\Phone as PhoneRule;
   
   PhoneInput::make('phone')
       ->rules([
           new PhoneRule(['US', 'GB']),
           'required',
       ]);
   

4. GeoIP Fallback:

   PhoneInput::make('phone')
       ->ipLookup(fn () => optional($_SERVER['HTTP_X_FORWARDED_FOR']) ?? request()->ip())
       ->disableLookup(); // Disable auto-lookup if using custom logic
   

Pro Tips

• Performance: Disable countrySearch() for large country lists:

  PhoneInput::make('phone')->countrySearch(false);
  

• Mobile UX: Enable useFullscreenPopup() for better mobile input:

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

• Testing: Use PhoneInputNumberType::E164 for consistent testing:

  PhoneInput::make('phone')->inputNumberFormat(PhoneInputNumberType::E164);