Questions tagged [blueprintjs]
Blueprint, a React UI toolkit for the web.
142
questions
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 ...
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....
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 ...
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 ...
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 }) => ...
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 ...
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} ...
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([
.....
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";
@...
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 ? &...
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 ...
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={...
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.
...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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}
...
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, ...
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 ...
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>}
...
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 ...
-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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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;
@...
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 ...
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",
...
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?
<...
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 ...
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 ...
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 "...
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: "...
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('...
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();
...
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 ...
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 ...
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.
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.
...
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 ...
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">
<...
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 ...
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 ...