Questions tagged [blueprintjs]

Blueprint, a React UI toolkit for the web.

Filter by
Sorted by
Tagged with
1 vote
0 answers
46 views

Blueprint library's DateRangePicker, provides no way to control the value shown in the TimePicker Component, when not in singleMonthOnly

In my React App i am using DateRangePicker from BluePrint Library DOCS, ik it's depreciated I have set the singleMonthOnly prop to false, hence i can see 2 months current & previous month I have ...
JJY9's user avatar
  • 533
0 votes
0 answers
49 views

BlueprintJS: How to close a select popup on click outside?

In the official documentation, the select popup dropdown has the behavior that it gets closed automatically when the user clicks anywhere outside the popup. This can be seen here: https://blueprintjs....
Martin Häusler's user avatar
0 votes
0 answers
40 views

Solving Cell-alignment issue in BluePrintJS's Table2 object

Following the below stock example of the BlueprintJS Table2 object, I encounter a cell alignment issue as per the attached image from the below. Do you have any tips on how to get this to display ...
P B's user avatar
  • 21
0 votes
1 answer
44 views

Highlight dates in DatePicker BlueprintJs

In my ReactJs project, I'm using DatePicker from BlueprintJS, and I have a list of dates const dates = ['2023-05-10', '2023-05-13', '2023-05-15'] How can I highlight or make them be selected on my ...
Rimad's user avatar
  • 11
0 votes
0 answers
78 views

Unit testing not working (Jest + RTL) on Hotkey Provider React JS

I use Hotkey Provider from Blueprint JS (blueprint js docs), and I'm not sure how to test it. It was something like : <HotkeysTarget2 hotkeys={hotkeys}> {({ handleKeyDown, handleKeyUp }) => ...
yoga web dev's user avatar
0 votes
0 answers
132 views

How to validate email addresses in Blueprint JS TagInput?

I'm trying to do an email sending form which accepts multiple email addresses as a receiver (to address), I'm using Blueprintjs TagInput for that. I want there to be an error message or perhaps an ...
Kristi R's user avatar
0 votes
0 answers
54 views

Why is scrollToActiveItem prop not working in blueprintjs Select2 component?

<Select2 filterable={true} items={userItems} itemPredicate={filterItem} itemRenderer={renderItem} onItemSelect={handleItemSelect} noResults={<MenuItem2 disabled={true} ...
Owenn's user avatar
  • 738
0 votes
1 answer
102 views

How to reset query on MultiSelect2 from blueprintjs after creating a new item?

Here's a little snippet of my <MultiSelect2 /> component. const addNewOption = (type: string) => { return type; }; const handleAddNewType = (type: string) => { setData([ .....
Owenn's user avatar
  • 738
2 votes
1 answer
386 views

Could not resolve "~@blueprintjs/core/lib/css/blueprint.css" when using esbuild

I am unable to import blueprint.js css files using @import in a css file using esbuild - no webpack. @import "~normalize.css"; @import "~@blueprintjs/core/lib/css/blueprint.css"; @...
JJWALLACE's user avatar
1 vote
1 answer
251 views

ReactJS rendering [object Object] when I try to use backticks and map through my array of objects

I am using a BlueprintJS button and my code look something like this: <Button text={`${user.name} (${user.invoicesCount?.unresolved ?? 0}) ${user.resolvingUsers.length > 0 ? &...
Owenn's user avatar
  • 738
0 votes
1 answer
70 views

Strange popover behavior in blueprintjs on safari

When using blueprintjs to display a menu using Popover I get some very, very strange results that only occur in Safari. (See the images.) The nice image shows what the menu looks like in Chrome or ...
Bruce Sherin's user avatar
1 vote
2 answers
395 views

How to use Toast from blueprintjs with hooks?

I get trouble to use Toast from blueprintjs I succeed to display it, but when I click on the cross the toast doesn't close and the timeout doesn't work. This is my code: <Toaster position={...
Malaury Boudon's user avatar
0 votes
1 answer
310 views

Blueprintjs icons not displaying correctly on pages

I am currently working on an old React application that has blueprintjs version 1. I upgraded to version 4. I followed the documentation. The icons are currently not displaying correctly. See image. ...
Damien's user avatar
  • 1,592
1 vote
1 answer
236 views

In blueprintjs tabs component, is there any way to display the tabs on the bottom of the tab panel

I am using the tabs component of Version 4 of Blueprintjs, and would like to display the tabs on the bottom of the panel as is typically done in a spreadsheet. There is a setting for moving the tabs ...
L. Blanc's user avatar
  • 2,210
0 votes
1 answer
231 views

JupyterLab Extension blueprintjs/core type issue after npm install

Made a JLab extension and saved to Git. Created new environment and pulling it works. Confirmed it worked for a friend too. Then just added a new react object to it and saved back to Git in a new ...
djmonkey's user avatar
0 votes
1 answer
303 views

Blueprint.js dynamic $ns variable in scss

I'm using Blueprint.js v3.x and have been making use of the SASS variables. I want to leverage the $ns variable, but my app is in dark mode. The $ns variable is set to bp3 !default; on line 10 of the ...
sapphyra's user avatar
0 votes
1 answer
683 views

Removing blue border around BlueprintJS numeric input on focus

I'm using a BlueprintJS Numeric Input component and want to remove the blue outline when you focus on the component. I want to remove it because it's inside something else that has its own border when ...
TheStrangeQuark's user avatar
0 votes
0 answers
326 views

Blueprint's Select Component onItemSelect trigger on 'Tab' key

The onItemSelect callback method for Blueprint's select component gets triggered only when an option is clicked or the 'enter' key is pressed. I would like it to be triggered when the 'Tab' key is ...
K.P.'s user avatar
  • 61
1 vote
1 answer
331 views

BlueprintJS Overlay/Portal not closing properly

I'm new to Blueprint, but I have a pretty simple overlay implementation using BP. The problem I'm having is that the portal isn't 'going away' after the user clicks on the background. The content ...
Patrick Dench's user avatar
0 votes
1 answer
466 views

Blueprint DateInput component not rendering correctly

I'm writing a movie-logging React application, and I'm trying to incorporate Blueprint's DateInput component in an 'add movie' dialog I've written. I've followed their example to the best of my ...
Ben M.'s user avatar
  • 1
3 votes
0 answers
126 views

Reduce BlueprintJS bundle size

I'm currently in the process of reducing my bundle size to deploy my project. I've noticed that blueprint takes up a large part of the bundle, approximately 130kb when using Brotli compression: Would ...
mmz's user avatar
  • 1,051
2 votes
0 answers
585 views

BlueprintJS: Modify the width of a Tooltip component

I'm using the React Blueprint library. I have a tooltip that contains a relatively long piece of content: <Tooltip className={Classes.TOOLTIP_INDICATOR} ...
mmz's user avatar
  • 1,051
0 votes
1 answer
574 views

Tabulator - custom cell editor not fully opened

The requirement is to have 'inline editing' of some cell in Tabulator based table. The cell requires a custom editor since the input is a custom component (which is already used in another form, ...
Boaz Rymland's user avatar
  • 1,459
0 votes
1 answer
2k views

How do I align 2 components next to each other in React?

I've been building the UI for a chat room app in React. Everything was going fine until suddenly, it refreshes and the UI "broke". Basically, I have 2 components, a Sidebar component and a ...
quachhengtony's user avatar
0 votes
0 answers
81 views

React: Communicating state between two sibling components

I am using a third-party react library (blueprintjs) with a Tab component that's used like this: <Tab id="notifications" title={<span>"Notifications"</span>} ...
MHebes's user avatar
  • 2,559
2 votes
0 answers
340 views

Proper method to use keyboard bindings to focus a dynamic menu/sub-menu in React

The Context I am using BlueprintJS to create a custom data-table with type-ahead results which return in a Menu component (think Google Sheets with typeaheads). I would like to be able to use the ...
Matt Dale's user avatar
  • 165
-1 votes
1 answer
276 views

i am trying to implement Select component from blueprintjs : TypeError: _this.props.itemRenderer is not a function

<Select items={items} filterable={false} itemRenderer={true}> <Button rightIcon="caret-down" text="Hello" /> </Select> I initialized items value and i am ...
Amarendra's user avatar
1 vote
0 answers
608 views

Sorting Columns With BlueprintJS Table

I want to be able to sort my column based on ascending or descending numbers. I don't totally understand the way to do this. The online documentation shows that a Menu must be added to the table, but ...
Arnav Malviya's user avatar
1 vote
1 answer
339 views

Create sorting in a blueprintjs table

I want to make my columns sortable in terms of ascending and descending. The blueprintjs talks about how this is possible, but isn't exactly clear on the steps on how to implement it. I have a table I ...
Arnav Malviya's user avatar
0 votes
1 answer
1k views

How to get data from blueprintjs table

I have created a blueprintjs table, and I want to be able to get it's data in JSON format. I do not want to get all the columns. Specific ones only and I only way them row by row. This is the format I ...
Arnav Malviya's user avatar
1 vote
2 answers
500 views

Make all children the same height inside a flexBox

I have a flexBox which has 2 children. 1 child is just an icon and it doesnt seem to take up the same height as the other child. Please advice me on a way to fix this. Playground URL:URL import React ...
arunmmanoharan's user avatar
9 votes
0 answers
4k views

Popper.js: how to set position fixed strategy with modifiers?

I'm trying to implement a context menu using BlueprintJs Popover component; that uses Popper.js to position the popover, under the hood. The problemis that: I have fixed elements and absolutely ...
Istvan Szasz's user avatar
  • 1,347
8 votes
5 answers
3k views

Blueprintjs: SassError: (path: (fill: #5c7080)) isn't a valid CSS value

I am trying to develop a blueprintjs custom theme. In my main.scss, import blueprintjs scss files like: @import "~@blueprintjs/core/lib/scss/variables.scss"; $pt-intent-primary: #110630; @...
Joy's user avatar
  • 9,428
0 votes
1 answer
324 views

Is there a way to write BlueprintJS MultiSelect overflow custom classname so that the position prop works along nicely?

So I have a MultiSelect component that has over 30 items. I wanted to prevent it overflowing the page, so I followed their Popover sizing instructions, and set the max height to 300px with overflow ...
Touit's user avatar
  • 1
2 votes
2 answers
2k views

Set custom SVG icon on Ag-Grid sidebar

I need to specify custom icons on my Ag-Grid (React) sidebar for custom panels. My toolpanels looks like this: toolPanels: [ { id: "actions", labelDefault: "Actions", ...
Troy Peterson's user avatar
2 votes
0 answers
307 views

Correct way to override css for blueprintjs components?

I've created a simple button and styled it via a custom class, but it doesn't work unless i enforce is using !important in the css file. How can I override styling without using !important? <...
doctopus's user avatar
  • 5,397
1 vote
2 answers
658 views

Blueprintjs Select keyboard navigation not working - React

I have a blueprintjs select component and I was wondering how to enable keyboard navigation on the component. I followed their documentation but couldn't get a better understanding of it. Is it an ...
arunmmanoharan's user avatar
0 votes
2 answers
531 views

useEffect appears to be triggered before render completion

I have this React component where I'm trying to move focus to a specific div after the component has finished rendering. I've tried debugging in my browser and the containerRef is never set. When I ...
zkwsk's user avatar
  • 1,990
0 votes
1 answer
619 views

Make sure that prop is a value from a constant - TS

I have a const in a library (blueprintjs). export const Intent = { NONE: "none" as "none", PRIMARY: "primary" as "primary", SUCCESS: "success" as "success", WARNING: "warning" as "...
arunmmanoharan's user avatar
1 vote
0 answers
484 views

TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type

I have these types in a library I use (blueprint.js) export const Intent = { NONE: "none" as "none", PRIMARY: "primary" as "primary", SUCCESS: "success" as "success", WARNING: "...
arunmmanoharan's user avatar
0 votes
0 answers
237 views

How to add a button in Toaster in BluePrintJS react?

I can add a button in my toaster of BluePrintJS using React.createElement. Example: Toaster .create() .show({ message: React.createElement('...
Mithhu's user avatar
  • 145
2 votes
2 answers
314 views

(React-redux) BlueprintJs Suggest cannot backspace in input after making a selection

class MySuggest extends React.Component<Props, State> { .... .... private handleClick = (item: string, event: SyntheticEvent<HTMLElement, Event>) => { event.stopPropagation(); ...
Joye's user avatar
  • 21
4 votes
1 answer
4k views

How to switch themes(light and dark) for all child components in a react application in blueprintjs v3?

I am writing an application in react and need a way to switch between dark mode and light mode. I could not find any document within blueprintjs docs which mentions how to change theme of all child ...
ajaykumar's user avatar
  • 646
0 votes
2 answers
1k views

How can I style "Tabs Example" from blueprintjs?

I'm trying to use BlueprintJs in a small project and I'm coming up with a problem where the style does not appear as I would expect. As I'm sure it's something quite simple I hope someone can point me ...
P.Gracia's user avatar
  • 244
0 votes
1 answer
514 views

BlueprintJS not rendering components

https://codesandbox.io/s/blueprint-sandbox-f6ekm Some components with BlueprintJS are not working. I'm following the docs but it doesn't work at all.
GN.'s user avatar
  • 8,902
1 vote
1 answer
344 views

blueprintjs keep content mounted in tabs

I am not sure if this is blueprintjs specific behaviour (new to react as well), but I cannot find a way to keep content loaded in a tab once rendered. I think "keep mounted" is the react terminology. ...
gurpal2000's user avatar
  • 1,044
0 votes
1 answer
253 views

BlueprintJS / React - trouble retrieving TagInput > Tag value via onClick

In a React/BlueprintJS app, I have a TagInput. I need to access the string value of any Tag when clicked. For simplicity, let's assume I just need to console.log(value). I can't seem to locate the ...
JDR's user avatar
  • 107
1 vote
0 answers
336 views

Select with SVG icon

is there any way to make dropdown menu to have arrows rendered with SVG instead of with font? The following example code renders arrow icon with icon font: <div class="pt-select"> <...
David Beneš's user avatar
4 votes
0 answers
658 views

How to use async data source for blueprintjs Select component?

The official way to filter items is the itemListPredicate event handler. It is documented here: https://blueprintjs.com/docs/#select/select-component.querying The problem is that itemListPredicate ...
nagylzs's user avatar
  • 3,954
4 votes
2 answers
3k views

How to make a select in Blueprintjs use (or simulate) fill? Or even be fixed-width?

I have made a select control using the documentation as an example. However, the button changes its width depending on the width of the text for the selected item. This makes the control jump around ...
Mike Viens's user avatar
  • 2,487