diff --git a/docs-site/src/components/Examples/index.js b/docs-site/src/components/Examples/index.js
index c26738aa8..97a6383e3 100644
--- a/docs-site/src/components/Examples/index.js
+++ b/docs-site/src/components/Examples/index.js
@@ -45,7 +45,7 @@ import DisabledKeyboardNavigation from "../../examples/disabledKeyboardNavigatio
import ReadOnly from "../../examples/readOnly";
import ClearInput from "../../examples/clearInput";
import OnBlurCallbacks from "../../examples/onBlurCallbacks";
-import ConfigurePopper from "../../examples/configurePopper";
+import ConfigureFloatingUI from "../../examples/configureFloatingUI";
import Portal from "../../examples/portal";
import PortalById from "../../examples/portalById";
import WithPortalById from "../../examples/withPortalById";
@@ -154,11 +154,12 @@ export default class exampleComponents extends React.Component {
component: CloseOnScrollCallback,
},
{
- title: "Configure Popper Properties",
- component: ConfigurePopper,
+ title: "Configure Floating UI Properties",
+ component: ConfigureFloatingUI,
description: (
- Full docs for the popper can be found at{" "}
+ Full docs for the underlying library that manages the overlay used can
+ be found at{" "}
+
{targetComponent}
{popper}
-
+
);
}
}
diff --git a/src/stylesheets/datepicker.scss b/src/stylesheets/datepicker.scss
index 8fb4228ba..38eb047fc 100644
--- a/src/stylesheets/datepicker.scss
+++ b/src/stylesheets/datepicker.scss
@@ -16,6 +16,7 @@
border-radius: $datepicker__border-radius;
display: inline-block;
position: relative;
+
// Reverting value set in .react-datepicker-popper
line-height: initial;
}
@@ -34,6 +35,7 @@
.react-datepicker-popper {
z-index: 1;
+
// Eliminating extra space at the bottom of the container
line-height: 0;
diff --git a/src/with_floating.jsx b/src/with_floating.jsx
index 84f6e5949..66ac1d87e 100644
--- a/src/with_floating.jsx
+++ b/src/with_floating.jsx
@@ -27,6 +27,7 @@ export default function withFloating(Component) {
const WithFloating = (props) => {
const arrowRef = React.useRef();
const floatingProps = useFloating({
+ open: !props.hidePopper,
whileElementsMounted: autoUpdate,
placement: props.popperPlacement,
middleware: [
@@ -47,11 +48,13 @@ export default function withFloating(Component) {
popperPlacement: PropTypes.oneOf(popperPlacementPositions),
popperModifiers: PropTypes.arrayOf(PropTypes.object),
popperProps: PropTypes.object,
+ hidePopper: PropTypes.bool,
};
WithFloating.defaultProps = {
popperModifiers: [],
popperProps: {},
+ hidePopper: true,
};
return WithFloating;