Prevent drawer overlay close about orbit

[mapsgeek]

Yes, we have a main Map component and need the drawer as a side panel for extra operations, so we need the drawer to stay open and not get closed when you click outside ( so the user can interact with the map ), sorry I found that not providing an onClose not an onClick can make it stay opened but the dark overlay covers and prevents interactions with the map and i can't extend the drawer component to hide overlay hence the question about ways to try adding a className so i can extend it.

[silvenon]

Hey, I discussed this from the UX perspective with the design team, and they pointed out the same usability problem. It would be best for you to create a separate Sidebar component, feel free to reuse Drawer's code for this, since it's licensed under MIT. 😉

[silvenon]

Hi, sounds like a sensible feature to have, to improve consistency. 👌 @mainframev?

[mapsgeek]

@silvenon I've a question, the current drawer doesn't close on outside click if you don't pass an onClose prop
and control it via the shown={showDrawer} instead, this way you can have control on what opens and closes it
but i'm trying to hide the overlay background which isn't accessible because the component has no className prop
i've tried to extend it with cloneElement but i failed maybe because i used it wrong.
so my question in general React components is it possible to inject a className prop to a component like this case
so i can extend it's styles?

[silvenon]

So you want to have the Drawer open but without the overlay? For what purpose? And how is it connected to what you said before about onClick and shown props?

[silvenon]

Ah, got it! Seems like a reasonable feature, we'll think about how to implement it, I suppose overlay={false} should be fine.

[silvenon]

However, no promises yet, Drawer is a component that covers part of the content, so arguably it might be a little odd to remove that overlay.