[Bug] Phone field not working in Inline Create

[GregaUNK]

Bug report

What I did

Added Phone field into setupCreateOperation and then use Inline create.

CRUD::field([
            'label' => 'Phone number',
            'name' => 'contact_phone',
            'type' => 'phone',
            'config' => [
                'onlyCountries' => ['si', 'hr', 'in', 'lv', 'pt', 'ro', 'rs', 'sr'],
                'initialCountry' => 'si' // this needs to be in the allowed country list, either in `onlyCountries` or NOT in `excludeCountries`

            ],
            'validationRules' => 'required',
            'wrapper' => [
                'class'       => 'form-group col-lg-12',
            ]
        ]);

What I expected to happen

Field to work :)

What happened

At first input field is streched thru whole screen. When you click it it shrinks, but even if you enter the value, validation shows error that contact_phone is empty.

What I've already tried to fix it

Is it a bug in the latest version of Backpack?

Yes.

Backpack, Laravel, PHP, DB version

PHP VERSION:

8.3.7

PHP EXTENSIONS:

Core, date, libxml, openssl, pcre, sqlite3, zlib, bcmath, bz2, calendar, ctype, curl, dba, dom, hash, FFI, fileinfo, filter, ftp, gd, gettext, gmp, json, iconv, intl, SPL, ldap, mbstring, session, standard, odbc, pcntl, exif, mysqlnd, PDO, pdo_dblib, pdo_mysql, PDO_ODBC, pdo_pgsql, pdo_sqlite, pgsql, Phar, posix, pspell, random, readline, Reflection, mysqli, shmop, SimpleXML, soap, sockets, sodium, sysvmsg, sysvsem, sysvshm, tidy, tokenizer, xml, xmlreader, xmlwriter, xsl, zip, Zend OPcache

LARAVEL VERSION:

10.48.20.0

BACKPACK PACKAGE VERSIONS:

backpack/basset: 1.3.5 backpack/crud: 6.7.34 backpack/generators: v4.0.5 backpack/logmanager: v5.0.2 backpack/permissionmanager: 7.2.1 backpack/pro: 2.1.7 backpack/revise-operation: 2.0.0 backpack/theme-coreuiv2: 1.2.5 backpack/theme-coreuiv4: 1.1.2 backpack/theme-tabler: 1.2.11

[jcastroa87]

Hello @GregaUNK

Can you please share a video, i try on my side and is working normal.

And the data is save with no errors.

Please give me more information to catch if there is an issue.

Cheers.

[GregaUNK]

Hi,

I saw you are using Tabler template, but I think its not the case. I tried to switch it and the same happens. I am using CoreUI v4.

As you can see, I’m getting the error: ‘No country data for ‘us’.’ I’m not sure why. If I remove the config section from the phone field, the error goes away, but I still get the same error when saving.

It looks like the hidden field for contact_phone isn’t being posted when the type is set to ‘phone’. If I change the type to ‘text’, it works.

This is my CreateOperation in PartnerContactCrudController.php

 protected function setupCreateOperation()
    {
        // for inline create
        if (request('main_form_fields') != null) {

            foreach (request('main_form_fields') as $field) {

                if ($field['name'] == 'partner_id') {
                    $partnerId = $field['value'];
                }
            }
        }

        CRUD::field([   // 1-n relationship
            'label'       => "Partner", // Table column heading
            'type'        => "select2_from_ajax",
            'name'        => 'partner_id', // the column that contains the ID of that connected entity
            'entity'      => 'partner', // the method that defines the relationship in your Model
            'attribute'   => "partner_name", // foreign key attribute that is shown to user
            'data_source' => backpack_url('partner-contact/fetch/partner'), // url to controller search function (with /{id} should return model)
            'method' => 'POST',
            'validationRules' => 'required',
            'value' => $partnerId ?? null
        ]);
        CRUD::field(['label' => 'Ime kontakta', 'name' => 'contact_name', 'type' => 'text', 'validationRules' => 'required']);
        CRUD::field([
            'label' => 'Telefonska številka',
            'name' => 'contact_phone',
            'type' => 'phone',
            'config' => [
                'onlyCountries' => ['si', 'hr', 'in', 'lv', 'pt', 'ro', 'rs', 'sr'],
                'initialCountry' => 'si' // this needs to be in the allowed country list, either in `onlyCountries` or NOT in `excludeCountries`

            ],
            'validationRules' => 'required',
            'wrapper' => [
                'class'       => 'form-group col-lg-12',
            ]
        ]);

    }

And this is my field in JobOrderCrudController.php

 CRUD::field([   // 1-n relationship
            'label'       => "Contact", // Table column heading
            'type'        => "relationship",
            'name'        => 'partner_contact_id', // the column that contains the ID of that connected entity
            'entity'      => 'partnerContact', // the method that defines the relationship in your Model
            'attribute'   => "full_contact_name", // foreign key attribute that is shown to user
            'data_source' => backpack_url('job-order/fetch/partner-contact'), // url to controller search function (with /{id} should return model)
            'method' => 'POST',
            'ajax' => true,
            'inline_create' => [
                'entity' => 'partner-contact',
                'include_main_form_fields' => ['partner_id'], 
            ],
            'validationRules' => 'required',
            'tab' => 'Order',
            'dependencies' => ['partner_id'],
            'wrapper' => [
                'class'       => 'form-group d-none col-lg-4',
            ],
            'minimum_input_length' => 0
        ]);

[GregaUNK]

Any help would be appreciated @pxpm @karandatwani92

[jcastroa87]

Hello @GregaUNK

I can not reproduce this issue, but we receive other issue about phone field: https://github.com/Laravel-Backpack/community-forum/issues/1148 so I update the library, this is in a PR, when this PR will be merged I will back to you so we can check if updated library fix this too.

Cheers.

[GregaUNK]

Hi,

ok, thanks.

BTW: this issue is only in InlineCreate. When Iam using PartnerContact CRUD directly, it works as expected.

[jcastroa87]

Is merged.

Could you try running:

composer update

If you have it in production, run:

php artisan basset:clear
php artisan basset:cache

Let me know if the library is update after this and you still have the issue.

Cheers.

[GregaUNK]

Hi @jcastroa87 ,

First of all, there was a mistake on my end where the PRO package was not updated. I was stuck on: backpack/pro: 2.1.7. Now, saving in the Inline modal is working as expected.

It seems you forgot to add the webp versions of the flags in this release. These should be added to phone.blade.php.

@basset('https://unpkg.com/intl-tel-input@24.4.0/build/img/flags.webp', false, [], false)
@basset('https://unpkg.com/intl-tel-input@24.4.0/build/img/flags@2x.webp', false, [], false)

One error that is still happening when you use config below, is because in phone.blade.php you setup countryCode 'us' as default. And if its not included in "onlyCountries" it throws an error.

Config:

'config' => [
  'onlyCountries' => ['si', 'hr', 'in', 'lv', 'pt', 'ro', 'rs', 'sr'],
  'initialCountry' => 'si', 
            ],

Error: “Unhandled Promise Rejection: Error: No country data for ‘us’”.

[pxpm]

Hey @GregaUNK thanks for the report. I could reproduce the issue you mentioned and released a new backpack/pro version with the fix. Please allow some moments for our private repository to pick the changes and then a composer update should get you the fixed version.

Please let us know if you still experiencing issues 👍

Cheers