mirror of
https://github.com/wagtail/wagtail.git
synced 2024-11-25 05:02:57 +01:00
a3cb4a6903
Tippy unmounts its popper element from the DOM on hide, which means that the filter fields get detached from the form. As a result, when performing a search (which means the filters popup is closed), any filters that have been applied will be lost. The issue does not occur the other way around (filtering after search) because the filter fields will still be in the DOM (as the popup is open while you're applying the filters). Unfortunately, Tippy does not offer a built-in option to keep the popper mounted in the DOM when it's hidden. As a workaround, use Tippy's hooks to re-append the popper to the DOM. - onCreate: ensure the popper element is mounted even when the tippy was just created (normally it's only mounted when shown). This is useful to keep the filters when searching after a full-page refresh (e.g. after navigating to the next page in pagination). - onHidden: ensure the popper is still mounted, to solve the main issue - onShow: remove the hidden attribute and let tippy move the popper element as necessary (though usually this isn't necessary, because we remount it in the same position (the controller's element). The 'hidden' attribute shouldn't cause any issues here as Tippy doesn't use it. Without it, the solution still works because Tippy uses CSS to make the element invisible. However, the complete CSS doesn't get applied until the tippy is shown at least once. This means on initial load with the onCreate hook, the tippy will take up the space while being invisible. Using the attribute fixes it (and display:none probably would too). This behaviour can be enabled using the newly-added DropdownController value 'keepMounted'. |
||
|---|---|---|
| .. | ||
| scss | ||
| src | ||
| storybook | ||
| tests | ||
| extract-translatable-strings.js | ||
| package-lock.json | ||
| README.md | ||
| tailwind.config.js | ||
| webpack.config.js | ||
Wagtail client-side components
This library aims to give developers the ability to subclass and configure Wagtail's UI components.
Usage
npm install wagtail
import { Explorer } from 'wagtail';
// [...]
<Explorer />;
Development
# From the project root, start the webpack + styles compilation.
npm run start
You will also need:
- React DevTools – React developer tools integrated into Chrome.
- Redux DevTools – Redux developer tools integrated into Chrome.
Releases
The front-end is bundled at the same time as the Wagtail project. This package also aims to be available separately on npm as wagtail.