Cannot read property 'getBoundingClientRect' of undefined

[newerton]

Code:

<?php
use kartik\editable\Editable;

echo Editable::widget([
    'name' => 'time',
    'inputType' => Editable::INPUT_TIME,
    'value' => date('H:i'),
]);

Error:

Info: Yii 2.0.11-dev PHP 7.0.3 jQuery JavaScript Library v2.2.4 yii2-editable 1.7.5 yii2-krajee-base 1.8.8 Bootstrap Popover Extended 1.4.2

[dasscheman]

I have the same issue. Did you figure out what the problem is?

[kartik-v]

You may need to check your code and if you have the latest assets loaded on your page from the extensions (ensure you have no cache issues or any old/stale web assets).

For example, you can check this works fine on the Editable widget demos page.

[newerton]

It does not have the "INPUT_TIME" in demos page, the error only occurs in it.

[kartik-v]

This is a bootstrap-timepicker plugin bug which auto triggers change on INIT - causing problems with other behavior of the popover plugin. This also causes currently this timepicker to be not usable as a GRIDVIEW filter in kartik-v/yii2-grid - because it triggers change on init causing an infinite loop refreshing the grid.

I will need to update the timepicker plugin code itself for this. Will update.

[kartik-v]

Resolved via kartik-v/yii2-widget-timepicker#12.

[baldiri]

Hi people,

i still get bug with same problem. Let me show you a column of a grid in my code ant tell when i get the error:

As you see is an EditableColumn with an INPUT_TIME ("kartik-v/yii2-widget-timepicker": "*")

[
     'class' => 'kartik\grid\EditableColumn',
     'hAlign' => 'center',
     'options' => ['style' => ['width' => '10%']],
     'attribute' => 'charging_time',
     'value' => function($model) {
                            return Yii::$app->formatter->asTime($model->charging_time);
     },
     'readonly' => function() {
          return (!in_array(Yii::$app->user->identity->role->id, [1, 3, 4]));
     },
     'refreshGrid' => true,
     'editableOptions'=> [
              'inputType' => \kartik\editable\Editable::INPUT_TIME,
              'formOptions'=>['action' => ['/travels/change-charging-time']],
              'asPopover' => true,
               'options'=> [
                     'pluginOptions' => [
                          'showMeridian' => false,
                           'showSeconds' => false,
                     ]
               ]
      ],
],

I get error every time that a pjax reload is done. So if i edit inline this o others columns, if i order by any column, if i apply any filter to grid, always after pjax reload grid i get this error.

Something is not ok when you have timepicker in your grid, and reload grid through pjax.

Debbuger (safari, but i test with chrome and same problem) says:

TypeError: undefined is not an object (evaluating '$el[0].getBoundingClientRect') getPosition - bootstrap-popover-x.js: line 222

Thanks in advance!!!

[luiszg]

Hello, I have the same problem. Did you solve it? I am also the same error every time that pjax is triggered.

Uncaught TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect') at PopoverX.getPosition (bootstrap-popover-x.js:303:66) at PopoverX.refreshPosition (bootstrap-popover-x.js:329:66) at HTMLDivElement.<anonymous> (bootstrap-popover-x.js:452:29) at Function.each (jquery.js:385:19) at jQuery.fn.init.each (jquery.js:207:17) at $.fn.popoverX (bootstrap-popover-x.js:438:21) at Editable.refreshPopover (editable.js:324:31) at Editable.formChange (editable.js:112:30) at HTMLInputElement.proxy (jquery.js:10892:13) at HTMLInputElement.dispatch (jquery.js:5494:27)

[arollmann]

In fact, problem is not solved and this issue should not be closed. I have the same as luiszg with this config in Kartik GridView:

[ 'class' => 'kartik\grid\EditableColumn', 'attribute' => 'Heuredeb', 'format' => ['time', 'php:H:i'], 'label' => 'Heure début', 'editableOptions' => [ 'header' => 'Heure début', 'size' => 'md', 'inputType' => \kartik\editable\Editable::INPUT_WIDGET, 'pluginEvents' => [ ], 'asPopover' => true, 'widgetClass' => 'kartik\datecontrol\DateControl', 'showButtonLabels' => true, 'submitButton' => [ 'class' => 'btn btn-warning btn-sm', ], 'options' => [ 'type' => \kartik\datecontrol\DateControl::FORMAT_TIME, 'ajaxConversion' => true, 'displayFormat' => 'php:H:i', 'saveFormat' => 'php:H:i:s', 'widgetOptions' => [ 'pluginOptions' => [ 'autoclose' => true, 'showSeconds' => false, 'showMeridian' => false, 'minuteStep' => 15, ], ], ], ], 'refreshGrid' => true ],

Environment:

• Linux Debian 12
• Nginx 1.24
• PHP-FPM 8.1
• Yii 2.0.49
• Bootstrap 5.3.1
• jQuery 3.7.1
• kartik-v/bootstrap-popover-x 1.5.2
• kartik-v/yii2-widget-timepicker 1.0.5
• kartik-v/yii2-editable dev-master ae4cc23
• kartik-v/yii2-grid dev-master cfc1a8e

Solution is to edit bootstrap-popover-x.js. Will make a pull request.