MedicOneSystems / MedicOneSystems/livewire-datatables

Search issue with Callback method when the return value consists HTML element.

Open
#370 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
PHP
Stars
1.2k
Forks
257
PR merge metrics
No merged PRs in 30d

Description

I stumbled upon this bug, accidentally, and I'm not having enough time to check the code to submit a pull request.

How to reproduce

First, define the column
public function columns()
{
    return [
        Column::callback(['role'], function($role) {
            switch ($role) {
                case "super_admin":
                    return "<span class='px-1 bg-red-500 text-white rounded text-xs'>Super Admin</span>";
                    break;
                case "admin_irwasum":
                    return "<span class='px-1 bg-green-500 text-white rounded text-xs'>Admin Irwasum</span>";
                    break;
                ... // more roles below
            }
        })
        ->label('Tipe Akun')
        ->searchable(),
    ];
}
Second, search the data using one character

Screenshot_20220104_165815

Third, see the result

Screenshot_20220104_165906

Additional notes
  • This bug occurs only when one character is searched, if the query is more than 2 characters, the bug won't occur.
  • I modified the cell column, only to add DaisyUI's dark mode classes. text-base-content, so I'm pretty sure it won't affect.
Personal thoughts

I think this bug is regex-related? Because if I see the code using Chrome's inspect element feature, here's what I got:
Screenshot_20220104_170252

How I expect the feature should be

Screenshot_20220104_170650
The HTML element is left unchanged, only the text inside or the content is changed.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue through the Column::callback and searchable configuration, focusing on a one-character search where the callback returns HTML. Trace the search result rendering and compare it with searches of more than two characters; done means the HTML element remains unchanged while only its text or content is altered.

Written by the indexing model from the issue text.

Assessment

Tech stack
laravel, php, tailwindcss
Domain
frontend, search
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.