codeigniter4 / CodeIgniter4

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

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

Closed mmlTools closed 2 years ago

mmlTools commented 2 years 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 2 years 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 2 years 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 2 years 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 2 years ago

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

kenjis commented 2 years 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 2 years ago

Closing as this is not a bug of the framework.

kenjis commented 2 years ago

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

paulbalandan commented 2 years 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 2 years ago
<?php

namespace App\Controllers;

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

image