qsm-odoo
e40cfe8495
Steps to reproduce the bug (starting from saas-16.4 only!): - Go to the website app - Enter edit mode => Bug: the editor toolbar appears for a few ms, then disappears. This bug occurs since [1], whose original commit was actually merged in 16.0 with [2]. The reason the bug only appears in saas-16.4 and not 16.0 is because of [3]. Commits [1] and [2] change the elements that are considered "tab-able" and thus the elements that can be auto-focused by the `useActiveElement` hook. That hook is actually used when we enter edit mode since [4], as a way to declare the editor as the active element so that keyboard shortcuts work (as indicated by the related commit). What actually happens thanks to the hook is that once we enter edit mode the "Block" button of the right panel is focused. This is because it is considered to be the first "tab-able" element (with or without [1]/[2]). Then keyboard shortcuts work as expected as the right panel is focused. However, since [3], the `useActiveElement` hook is called "too soon". Indeed the right panel is not actually inside the "auto-focused" editor container yet**. The result is that what is now "auto-focused" is the editor toolbar***. Before [1], the element in the toolbar that was focused was an invisible one, so no bug appeared. Since [1], we only auto-focus visible elements... so we now focus a visible element in the editor toolbar, making it visible during editor instantiation. This commit fixes the issue independently of [3] (which is why this targets 16.0: to consolidate the codebases). Actually, the use of the `useActiveElement` hook added by [4] is useless. It was fixing the issue at the time, but the real solution was to do what was done since at [5]. Indeed, the keyboard shortcuts were not working because the backend navbar was still visible (even if outside of the viewport) so it was its keyboard shortcuts that took precedence. Since [5], the use of `useActiveElement` actually has not benefit anymore. The editor is part of the backend UI, the backend UI is still focused after entering edit mode, shortcuts targeting the editor panel are thus working naturally. Removing the use of the `activeElement` hook only has one side effect: the "Block" button of the right panel is not auto-focused anymore... which is not needed. Notes: - The `useActiveElement` hook also has another purpose: allowing cycling using tab and shift-tab, it should work naturally as with the backend UI anyway but mainly: tab and shift-tab do not seem to be working with the editor UI anyway. - Another hint that [4] was not right way to go is that this is the only use of the `useActiveElement` hook in the whole codebase, except for the framework use for dialogs. - ** That should maybe be solved on its own, although maybe it is not important and risky at best. - *** The editor toolbar should not even be instantiated that way in the first place since it will be attached to the right panel later... but that is another issue. [1]: https://github.com/odoo/odoo/commit/c631bf09b927003edc4c2b85e8790e8e2e8c044a [2]: https://github.com/odoo/odoo/commit/57452ee59c3e33eaa219d8d7b8d82239fd33b722 [3]: https://github.com/odoo/odoo/commit/76d4f9811b756f0e57b0a33dbba534c900c7fe15 [4]: https://github.com/odoo/odoo/commit/b0108e1876a27e83231e176cdca3e2d67d6a2a9c [5]: https://github.com/odoo/odoo/commit/cdc8d4c889b316664323afad0d848403960150d5 task-3686730 closes odoo/odoo#151373 X-original-commit: aa168b5583b9b437fcf83c2f7b2d256ec66e4c79 Signed-off-by: Romain Derie (rde) <rde@odoo.com> Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Odoo Website Builder
Get an awesome and free website, easily customizable with the Odoo website builder.
Create enterprise grade website with our super easy builder. Use finely designed building blocks and edit everything inline.
Benefit from out-of-the-box business features; e-Commerce, events, blogs, jobs announces, customer references, call-to-actions, etc.
Edit Anything Inline
Create beautiful websites with no technical knowledge. Odoo's unique 'edit inline' approach makes website creation surprisingly easy. No more complex backend; just click anywhere to change any content.
"Want to change the price of a product? or put it in bold? Want to change a blog title?" Just click and change. What you see is what you get. Really.
Awesome. Astonishingly Beautiful.
Odoo's building blocks allow to design modern websites that are not possible with traditional WYSIWYG page editors.
Whether it's for products descriptions, blogs or static pages, you don't need to be a professional designer to create clean contents. Just drag and drop and customize predefined building blocks.
Enterprise-Ready, out-of-the-box
Activate ready-to-use enterprise features in just a click; e-commerce, call-to-actions, jobs announces, events, customer references, blogs, etc.
Traditional eCommerce and CMS have poorly designed backends as it's not their core focus. With the Odoo integration, you benefit from the best management software to follow-up on your orders, your jobs applicants, your leads, etc.
A Great Mobile Experience
Get a mobile friendly website thanks to our responsive design based on bootstrap. All your pages adapt automatically to the screen size. (mobile phones, tablets, desktop) You don't have to worry about mobile contents, it works by default.
SEO tools at your finger tips
The Promote tool suggests keywords according to Google most searched terms. Search Engine Optimization tools are ready to use, with no configuration required.
Google Analytics tracks your shopping cart events by default. Sitemap and structured content are created automatically for Google indexation.
Multi-Languages Made Easy
Get your website translated in multiple languages with no effort. Odoo proposes and propagates translations automatically across pages, following what you edit on the master page.
Designer-Friendly Templates
Templates are awesome and easy to design. You don't need to develop to create new pages, themes or building blocks. We use a clean HTML structure, a bootstrap CSS.
Customize every page on the fly with the integrated template editor. Distribute your work easily as an Odoo module.
Fluid Grid Layouting
Design perfect pages by drag and dropping building blocks. Move and scale them to fit the layout you are looking for.
Building blocks are based on a responsive, mobile friendly fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Professional Themes
Design a custom theme or reuse pre-defined themes to customize the look and feel of your website.
Test new color scheme easily; you can change your theme at any time in just a click.
Integrated With Odoo Apps
e-Commerce
Promote products, sell online, optimize visitors' shopping experience.
Blog
Write news, attract new visitors, build customer loyalty.
Online Events
Schedule, organize, promote or sell events online; conferences, trainings, webinars, etc.