[#45004] - [6.0] Field simple color as web component
- Fixed in Code Base
- 16 Aug 2025
- Medium
- Build: 6.0-dev
- # 45004
- Diff
- dgrammatiko:6.0-dev-field-simple-color
User tests: Successful: Unsuccessful:
Summary of Changes
Refactor the code so:
- php: layout spits buttons as slotted elements
- use of :part to style the component internals baseline
- use of
shadowRoot.adoptedStyleSheetsfor CSP strict css baseline 2023 - component becomes light/dark
- JS: component now uses the
elementInternalsso it is an actual form field baseline 2023 - The client side supports all the colors that a browser could support (hex, rgb, lch, oklab,
color(colorspace val1 val2 val3 / alpha)). This requires setting the format to"". All color values are validated client side
B/C considerations:
- The field layout has changes (the old one WILL NOT WORK)
- The old field dispatched 2 change events, one on the custom element and another on the select element. There's only one event on the custom element now
Testing Instructions
Paste this:
<field
name="blabla"
type="color"
control="simple"
format=""
colors="#000000,rgb(59% 4.79% 75.2% / 0.8),oklch(87% 0.293 207),oklab(79% -0.261 0.088),color(display-p3 0.83 0.19 0.73 / 0.96),#FF0000,lch(56 90.2 154 / 0.88),none"
default=""
label="color"
/>in the templateDetails.xml of the Atum template (after line 51: <fieldset name="colors" label="TPL_ATUM_COLORS_SETTINGS_LABEL">)
Check that the field:
- saves and respects the value from the PHP side
- works with the keyboard (enter to go to the select mode, tab to navigate, enter to select)
Actual result BEFORE applying this Pull Request
Expected result AFTER applying this Pull Request
Screen.Recording.2024-03-19.at.6.11.53.PM.mov
Link to documentations
Please select:
-
Documentation link for docs.joomla.org:
-
No documentation changes for docs.joomla.org needed
-
Pull Request link for manual.joomla.org:
-
No documentation changes for manual.joomla.org needed
Unused strings
JFIELD_COLOR_SELECT="Select a colour"
JFIELD_COLOR_TRANSPARENT="No colour, transparent"
JFIELD_COLOR_VALUE="Colour with hexadecimal value of"
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Administration Language & Strings Repository JavaScript NPM Change Layout |
| Labels |
Added:
Language Change
NPM Resource Changed
PR-6.0-dev
|
||
| Labels |
Added:
Feature
Enhancement
|
||
I have tested this item ✅ successfully on ff4b424
I can confirm the two field checks work as described. The rest is a mystery to me!
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45004.
QuyTon
- 
@softforge any interest here?
@softforge any interest here?
I will check over the weekend and get back to you.
@dgrammatiko I realise that @softforge never replied but there are merge conflicts now that need resolving
resolved the conflicts
Will add it to this afternoons testing, thank you @dgrammatiko
I have tested this item 🔴 unsuccessfully on ab20d37
I have sadly unsuccessfully tested this.
The 1st part works: saves and respects the value from the PHP side but
the 2nd part: works with the keyboard (enter to go to the select mode, tab to navigate, enter to select)
does not! Enter opens and closes the color picker but tab doesn't, arrows doesn't, shift doesn't nothing makes it move from color to color.
MacBook Pro M4, Safari 18.6
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45004.
I have tested this item 🔴 unsuccessfully on ab20d37I have sadly unsuccessfully tested this. The 1st part works: saves and respects the value from the PHP side but the 2nd part: works with the keyboard (enter to go to the select mode, tab to navigate, enter to select)
does not! Enter opens and closes the color picker but tab doesn't, arrows doesn't, shift doesn't nothing makes it move from color to color.
MacBook Pro M4, Safari 18.6
@exlemor How have you applied the patch? Patchtester is not sufficient. It needs a development environment to compile css and js, or you have to use the pre-built package from Drone.
I have tested this item 🔴 unsuccessfully on ab20d37I have sadly unsuccessfully tested this. The 1st part works: saves and respects the value from the PHP side but the 2nd part: works with the keyboard (enter to go to the select mode, tab to navigate, enter to select)
does not! Enter opens and closes the color picker but tab doesn't, arrows doesn't, shift doesn't nothing makes it move from color to color.
MacBook Pro M4, Safari 18.6@exlemor How have you applied the patch? Patchtester is not sufficient. It needs a development environment to compile css and js, or you have to use the pre-built package from Drone.
yes, I used the Download package: Joomla_6.0.0-alpha4-dev+pr.45004-Development-Update_Package.zip and was doing during the PR Testing Group session and Martina and others were there to watch me ;)
I just tried it myself and it's fine. Can you post the contents of the file media/system/js/fields/joomla-field-simple-color.js here?
I have tested this item ✅ successfully on ab20d37
Tested this successfully. Also the navigation works fine on my mac on safari 18.6
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45004.
I have tested this item ✅ successfully on ab20d37
Tested with
-
Version 138.0.7204.183 (Official Build, ungoogled-chromium) (64-Bit)
-
Mozilla Firefox for Linux Mint 141.0.3 (64-Bit)
Navigation works as described in the testing instructions.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45004.
I have tested this item 🔴 unsuccessfully on ab20d37
Still unsuccessful. I re-installed from the Download Package and same results.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45004.
@dgrammatiko here is the file you requested.
joomla-field-simple-color.js.txt
(had to rename file .js to .txt to be able to upload it to Github).
Could you post a gif/video of what’s happening there. I tested it also in sf18.6 and works fine
Here is the video, its tough to show as you can't see the keys I am pressing on my keyboard but I promise I know where the Tab key is ;)
ScreenFloat.Recording.of.Safari.at.Aug.15.2025.at.11_40_27.PM.mov
I can also open a Google Meet or equivalent and share my screen if you want.
I found the issue/solution...
There is an OS level option on Mac Sequoia 15.6 (and since 2022 and possibly before that version)
System Settings > Keyboard > Enable "Keyboard navigation"
Keyboard Navigation inline help says: Use keyboard navigation to move focus between controls. Press the Tab key to move focus forward Shift Tab to move the focus backwards.
IF you turn that feature ON, then your code works, here is the rub though... the ISSUE is that it is NOT on by Default on Macs (I checked (and has never been defaulted to ON).
This keyboard navigation setting is turned off on my mac and it still worked fine.
| Status | Pending | ⇒ | Ready to Commit |
RTC
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45004.
| Labels |
Added:
RTC
|
||
| Status | Ready to Commit | ⇒ | Fixed in Code Base |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2025-08-16 11:58:45 |
| Closed_By | ⇒ | softforge |
Thank you for your work on this and all the dedicated testers
When I try to test this PR from the Joomla_6.0.0-alpha1-dev+pr.45004-Development-Full_Package.zip file, I get this error when trying to go to Administrator Templates in the backend:
An error has occurred.
0 Call to undefined method stdClass::get()
Call Stack
Function Location
1 () JROOT/administrator/components/com_templates/tmpl/templates/default.php:101
2 include() JROOT/libraries/src/MVC/View/HtmlView.php:416
3 Joomla\CMS\MVC\View\HtmlView->loadTemplate() JROOT/libraries/src/MVC/View/HtmlView.php:204
4 Joomla\CMS\MVC\View\HtmlView->display() JROOT/administrator/components/com_templates/src/View/Templates/HtmlView.php:128
5 Joomla\Component\Templates\Administrator\View\Templates\HtmlView->display() JROOT/libraries/src/MVC/Controller/BaseController.php:697
6 Joomla\CMS\MVC\Controller\BaseController->display() JROOT/administrator/components/com_templates/src/Controller/DisplayController.php:68
7 Joomla\Component\Templates\Administrator\Controller\DisplayController->display() JROOT/libraries/src/MVC/Controller/BaseController.php:730
8 Joomla\CMS\MVC\Controller\BaseController->execute() JROOT/libraries/src/Dispatcher/ComponentDispatcher.php:143
9 Joomla\CMS\Dispatcher\ComponentDispatcher->dispatch() JROOT/libraries/src/Component/ComponentHelper.php:361
10 Joomla\CMS\Component\ComponentHelper::renderComponent()
Checked with Philip who verified I was doing it correctly.