zefyrka icon indicating copy to clipboard operation
zefyrka copied to clipboard

Cursor disappears if clicking on empty space

Open JCKodel opened this issue 3 years ago • 0 comments

Video: https://vimeo.com/658396463/c4966aba27

My scenario: I'm doing a colour button on the toolbar using ZDropdownButton<Color>. After setting the text style, if I touch anywhere in the editor, except another text, the cursor just vanishes. It continues to accept input, but the cursor is invisible.

The cursor only become visible again if I press [Enter] or touch on another text.

On the video, you can see the cursor briefly disappears after I turn the word Color blue (that's because I touch the test word afterwards). Then, when colouring another word and touching on the empty editor space, notice how the cursor vanishes and never returns (until I touch a word or press [Enter] on the keyboard).

This is my toolbar button (with a modified ZDropdownButton class so the button don't get 110 pixels of width):

ZDropdownButton<Color>(
  child: Icon(Remix.font_color, color: _selectedColor),
  initialValue: _selectedColor ?? theme.colorScheme.onSurface,
  items: _colors,
  onSelected: (color) => _editorController.formatSelection(NotusAttribute.color.fromInt(color.value)),
),

The current color is tracked by:

_editorController.addListener(() {
  final selectionStyle = _editorController.getSelectionStyle();
  final colorAttribute = selectionStyle.get(NotusAttribute.color);

  if (colorAttribute != null) {
    setState(() => _selectedColor = Color(colorAttribute.value!));
  }

  final backgroundColorAttribute = selectionStyle.get(NotusAttribute.backgroundColor);

  if (backgroundColorAttribute != null) {
    setState(() => _selectedBackgroundColor = Color(backgroundColorAttribute.value!));
  }
});

The colours itself are only the current light/dark theme + Material primaries + black and white:

_colors = [
  PopupMenuItem(child: SizedBox(width: 80, height: 16, child: Placeholder(color: widget.defaultTextColor)), value: widget.defaultTextColor),
  ...Colors.primaries.map(
    (color) => PopupMenuItem(
      child: Container(width: 80, height: 16, color: color),
      value: color,
    ),
  ),
  PopupMenuItem(child: Container(width: 80, height: 16, color: Colors.black), value: Colors.black),
  PopupMenuItem(child: Container(width: 80, height: 16, color: Colors.white), value: Colors.white),
];

JCKodel avatar Dec 19 '21 21:12 JCKodel