codeigniter4 / CodeIgniter4

Open Source PHP Framework (originally from EllisLab)
https://codeigniter.com/
MIT License
5.31k stars 1.89k forks source link

Toolbar table sort script interfering with project tables in development environment #6808

Closed mmlTools closed 1 year ago

mmlTools commented 1 year ago

PHP Version

7.4

CodeIgniter4 Version

4.2.8

CodeIgniter4 Installation Method

Manual (zip or tar.gz)

Which operating systems have you tested for this bug?

Windows, Linux

Which server did you use?

apache

Database

MySQL 5.6

What happened?

Toolbar table sort script interfering with project tables in development environment.

Steps to Reproduce

1.Set environment to development 2.Create a table with headers as for example

<table>
<thead>
<tr><th>Col1</th><th>Col2</th></tr>
<thead>
<tbody>
<tr><td>1</td><td>a</td></tr>
<tr><td>2</td><td>b</td></tr>
<tr><td>3</td><td>d</td></tr>
</tbody>
<table>

3.Click on any of the table headers and the table will be sorted

Expected Output

This shouldn't happen because is interfering with custom table sort scripts.

Anything else?

No response

kenjis commented 1 year ago

I confirmed the bug.

<?php

namespace App\Controllers;

class Home extends BaseController
{
    public function index()
    {
        return '<table>
<thead>
<tr><th>Col1</th><th>Col2</th></tr>
<thead>
<tbody>
<tr><td>100</td><td>a</td></tr>
<tr><td>2</td><td>b</td></tr>
<tr><td>3</td><td>d</td></tr>
</tbody>
<table>';
    }
}
kenjis commented 1 year ago

This feature is provided by Kint. You can disable Kint, but a bug that outputs "0" when you disable Kint. See #6809

mmlTools commented 1 year ago

This feature is provided by Kint. You can disable Kint, but a bug that outputs "0" when you disable Kint. See #6809

Created a hackfix that is not causing any errors.

  1. Go to system\ThirdParty\Kint\resources\compiled\rich.js and beautify this js file
  2. In line 183 comment the following
    else
     e.ctrlKey || l.sortTable(t.parentNode.parentNode.parentNode, t.cellIndex)
  3. Use this instead
    else if($(t.closest('#debug-bar')).length)
                l.sortTable(t.parentNode.parentNode.parentNode, t.cellIndex)
            else
                e.ctrlKey

This will check if parent element is our debug bar.

erikkraijenoord commented 1 year ago

Exactly the same happend to me, thank you for the provided information!

kenjis commented 1 year ago

I don't know the details. Why does toolbar outputs Kint's js? Does toolbar use it?

And we cannot patch Kint. If Kint's js breaks our apps, it seems to be a bug in Kint.

paulbalandan commented 1 year ago

Closing as this is not a bug of the framework.

kenjis commented 1 year ago

@paulbalandan Do you know why toolbar outputs Kint's js?

paulbalandan commented 1 year ago

This is because of this line: https://github.com/codeigniter4/CodeIgniter4/blob/ad783a8ad2e3683403eefa614d8b6e0f2fa12ae7/system/Debug/Toolbar.php#L116

If we passed data to view(), those will be shown in the toolbar. If the passed data is an object, for example, the line above will create a Kint representation of the object similar to d()'s output, so it needs rendering.

paulbalandan commented 1 year ago
<?php

namespace App\Controllers;

class Home extends BaseController
{
    public function index()
    {
        return view('welcome_message', ['home' => new self]);
    }
}

image