AppFlowy-IO/AppFlowy

Fork 0

mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2026-03-24 12:56:59 +00:00

[GH-ISSUE #3797] [FR] adding more options than the input bar can fit #1719

New issue

Closed

opened 2026-03-23 21:16:25 +00:00 by mirror · 4 comments

mirror commented

2026-03-23 21:16:25 +00:00

Owner

Originally created by @annieappflowy on GitHub (Oct 26, 2023).
Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/3797

Originally assigned to: @richardshiue on GitHub.

Description

As shown in the screenshot, the third option takes up more space than the input bar can fit
In this scenario, the cursor should jump to the end and be shown in the input bar

Impact

Database select and multi-select users

Additional Context

No response

Originally created by @annieappflowy on GitHub (Oct 26, 2023). Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/3797 Originally assigned to: @richardshiue on GitHub. ### Description <img width="337" alt="image" src="https://github.com/AppFlowy-IO/AppFlowy/assets/12026239/53131774-e651-4b1e-b4b4-8f4059ac8aa9"> As shown in the screenshot, the third option takes up more space than the input bar can fit In this scenario, the cursor should jump to the end and be shown in the input bar ### Impact Database select and multi-select users ### Additional Context _No response_

mirror

2026-03-23 21:16:25 +00:00

closed this issue
added the
grid

2024

kanban board

improvements
labels

mirror commented

2026-03-23 21:16:26 +00:00

Author

Owner

@Xazin commented on GitHub (Oct 26, 2023):

I assume this can be fixed very easily without the below by an interim solution, but I'm going to leave some references below:

https://github.com/AppFlowy-IO/AppFlowy/issues/3453
https://material.angular.io/components/chips/overview#chips-input
https://v4.mui.com/components/autocomplete/#multiple-values
https://primeng.org/chips

@Xazin commented on GitHub (Oct 26, 2023): I assume this can be fixed very easily without the below by an interim solution, but I'm going to leave some references below: https://github.com/AppFlowy-IO/AppFlowy/issues/3453 https://material.angular.io/components/chips/overview#chips-input https://v4.mui.com/components/autocomplete/#multiple-values https://primeng.org/chips

mirror commented

2026-03-23 21:16:26 +00:00

Author

Owner

@Devas45 commented on GitHub (Oct 27, 2023):

Thanks to @Xazin references to PrimeNG Chips

I made changes to the select_option.dart as follows::

1.Using InputChip widgets to display options as chips.

2.Ensuring compatibility with PrimeNG's ChipsModule .
(Added dependencies)

Suggest the changes to be made.

`class _OptionChips extends StatelessWidget {
final List options;
final PopoverMutex? popoverMutex;

const _OptionChips(this.options, this.popoverMutex, {Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Wrap(
spacing: 8.0,
children: options.map((option) {
return InputChip(
label: Text(option.name),
selected: option.selected,
onSelected: (selected) {
context.read().add(
SelectOptionTypeOptionEvent.toggleSelection(option),
);
},
onDeleted: () {
context.read().add(
SelectOptionTypeOptionEvent.deleteOption(option),
);
},
);
}).toList(),
);
}
}`

@Devas45 commented on GitHub (Oct 27, 2023): Thanks to @Xazin references to PrimeNG Chips I made changes to the select_option.dart as follows:: 1.Using InputChip widgets to display options as chips. 2.Ensuring compatibility with PrimeNG's ChipsModule . (Added dependencies) Suggest the changes to be made. `class _OptionChips extends StatelessWidget { final List<SelectOptionPB> options; final PopoverMutex? popoverMutex; const _OptionChips(this.options, this.popoverMutex, {Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Wrap( spacing: 8.0, children: options.map((option) { return InputChip( label: Text(option.name), selected: option.selected, onSelected: (selected) { context.read<SelectOptionTypeOptionBloc>().add( SelectOptionTypeOptionEvent.toggleSelection(option), ); }, onDeleted: () { context.read<SelectOptionTypeOptionBloc>().add( SelectOptionTypeOptionEvent.deleteOption(option), ); }, ); }).toList(), ); } }`

mirror commented

2026-03-23 21:16:27 +00:00

Author

Owner

@annieappflowy commented on GitHub (Oct 31, 2023):

@Devas45 , would you like to submit a PR? We'll review

@annieappflowy commented on GitHub (Oct 31, 2023): @Devas45 , would you like to submit a PR? We'll review

mirror commented

2026-03-23 21:16:27 +00:00

Author

Owner

@annieappflowy commented on GitHub (Jun 22, 2024):