Commit Graph

41 Commits

Author SHA1 Message Date
Ben Henning
1e37d21f0a fix: Ensure focus changes when tabbing fields (#9173)
## The basics

- [x] I [validated my changes](https://developers.google.com/blockly/guides/contribute/core#making_and_verifying_a_change)

## The details
### Resolves

Fixes https://github.com/google/blockly-keyboard-experimentation/issues/578
Fixes part of #8915

### Proposed Changes

Ensures fields update focus to the next field when tabbing between field editors. The old behavior can be observed in [#578](https://github.com/google/blockly-keyboard-experimentation/issues/578) and the new behavior can be observed here:

[Screen recording 2025-06-25 1.39.28 PM.webm](https://github.com/user-attachments/assets/e00fcb55-5c20-4d5c-81a8-be9049cc0d7e)

### Reason for Changes

Having focus reset back to the original field editor that was opened is an unexpected experience for users. This approach is better.

Note that there are some separate changes added here, as well:
- Connections and fields now check if their block IDs contain their indicator prefixes since this will all-but-guarantee focus breaks for those nodes. This is an excellent example of why #9171 is needed.
- Some minor naming updates for `FieldInput`: it was incorrectly implying that key events are sent for changes to the `input` element used by the field editor, but they are actually `InputEvent`s per https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event.

### Test Coverage

New tests were added for field editing in general (since this seems to be missing), including tabbing support to ensure the fixes originally introduced in #9049.

One new test has been added specifically for verifying that focus updates with tabbing. This has been verified to fail with the fix removed (as have all tabbing tests with the tabbing code from #9049 removed).

Some specific notes for the test changes:
- There's a slight test dependency inversion happening here. `FieldInput` is being tested with a specific `FieldNumber` class via real block loading. This isn't ideal, but it seems fine given the circumstances (otherwise a lot of extra setup would be necessary for the tests).
- The workspace actually needs to be made visible during tests in order for focus to work correctly (though it's reset at the end of each test, but this may cause some flickering while the tests are running).
- It's the case that a bunch of tests were actually setting up blocks incorrectly (i.e. not defining a must-have `id` property which caused some issues with the new field and connection ID validation checks). These tests have been corrected, but it's worth noting that the blocks are likely still technically wrong since they are not conforming to their TypeScript contracts.
- Similar to the previous point, one test was incorrectly setting the first ID to be returned by the ID generator as `undefined` since (presumably due to a copy-and-paste error when the test was introduced) it was referencing a `TEST_BLOCK_ID` property that hadn't been defined for that test suite. This has been corrected as, without it, there are failures due to the new validation checks.
- For the connection database checks, a new ID is generated instead of fixing the block ID to ensure that it's always unique even if called multiple times (otherwise a block ID would need to be piped through from the calling tests, or an invalid situation would need to be introduced where multiple blocks shared an ID; the former seemed unnecessary and the latter seemed nonideal).
- There are distinct Geras/Zelos tests to validate the case where a full-block field should have its parent block, rather than the field itself, focused on tabbing. See this conversation for more context: https://github.com/google/blockly/pull/9173#discussion_r2172921455.

### Documentation

No documentation changes should be needed here.

### Additional Information

Nothing to add.
2025-07-02 16:07:05 -07:00
Ben Henning
083329aaa5 feat: Add support for conditional ephemeral focus. (#9051)
## The basics

- [x] I [validated my changes](https://developers.google.com/blockly/guides/contribute/core#making_and_verifying_a_change)

## The details
### Resolves

Needed for fixing https://github.com/google/blockly-samples/issues/2514 and https://github.com/google/blockly-samples/issues/2515.

### Proposed Changes

Update `FieldInput` along with drop-down and widget divs to support disabling the automatic ephemeral focus functionality.

### Reason for Changes

As mentioned in https://github.com/google/blockly-samples/issues/2514#issuecomment-2881539117 both https://github.com/google/blockly-samples/issues/2514 and https://github.com/google/blockly-samples/issues/2515 were caused by the custom fields leading to both drop-down and widget divs simultaneously taking ephemeral focus (and that's not currently allowed by `FocusManager`). This change updates both widget and drop-down divs with _optional_ parameters to conditionally disable automatic ephemeral focus so that `FieldInput` can, in turn, be customized with disabling automatic ephemeral focus for its inline editor. Being able to disable ephemeral focus for `FieldInput` allows the custom fields' own drop-down divs to take and manage ephemeral focus, instead, avoiding the duplicate scenario that led to the runtime failure.

Note that the drop-down div change in this PR is completely optional, but it's added for consistency and to avoid future scenarios of breakage when trying to use both divs together (as a fix is required in Core without monkeypatching).

It's worth noting that there could be a possibility for a more 'proper' fix in `FocusManager` by allowing multiple calls to `takeEphemeralFocus`, but it's unclear exactly how to solve this consistently (which is why it results in a hard failure today). The main issue is that the current focused node can change from underneath the manager (due to DOM focus changes), and the current focused element may also change. It's not clear if the first, last, or some other call to `takeEphemeralFocus` should take precedent or which node to return focus once ephemeral focus ends (in cases with multiple subsequent calls).

### Test Coverage

No new tests were added, though common field cases were tested manually in core's simple playground and in the plugin-specific playgrounds (per the original regressions). The keyboard navigation plugin test environment was also verified to ensure that this didn't alter any existing behavior (it should be a no-op except for the two custom field plugins).

Automated tests would be nice to add for all three classes, perhaps as part of #8915.

### Documentation

The code documentation changes here should be sufficient.

### Additional Information

These changes are being done directly to ease solving the above samples issues. See https://github.com/google/blockly-samples/pull/2521 for the follow-up fixes to samples.
2025-05-14 15:35:07 -07:00
Aaron Dodson
7a7fad45c1 fix: Reenable support for tabbing between fields. (#9049)
* fix: Reenable support for tabbing between fields.

* refactor: Reduce code duplication.
2025-05-14 11:23:12 -07:00
Aaron Dodson
14e1ef6dc6 fix: Fix regressions in Field. (#9011) 2025-05-13 14:26:00 -07:00
Aaron Dodson
ca362725ee refactor!: Backport LineCursor to core. (#8834)
* refactor: Backport LineCursor to core.

* fix: Fix instantiation of LineCursor.

* fix: Fix tests.

* chore: Assauge the linter.

* chore: Fix some typos.

* feat: Make padding configurable for scrollBoundsIntoView.

* chore: Merge in the latest changes from keyboard-experimentation.

* refactor: Clarify name and docs for findSiblingOrParentSibling().

* fix: Improve scrollBoundsIntoView() behavior.

* fix: Export CursorOptions.

* refactor: Further clarify second parameter of setCurNode().

* fix: Revert change that could prevent scrolling bounds into view.
2025-04-03 12:15:17 -07:00
Aaron Dodson
7a07b4b2ba refactor!: Remove old cursor and tab support. (#8803) 2025-03-28 13:54:33 -07:00
Aaron Dodson
bcdb65c623 release: Merge branch 'develop' into rc/v12.0.0 2025-01-10 10:53:09 -08:00
Aaron Dodson
a42c2d1508 feat: Add a BlockSvg.getStyle() method. (#8722)
* feat: Add a BlockSvg.getStyle() method.

* refactor: Remove direct field access to BlockSvg.style.
2025-01-07 14:44:48 -08:00
Aaron Dodson
9fcd5a3037 release: Merge branch 'rc/v11.2.0' into rc/v12.0.0 2024-12-04 12:06:12 -08:00
Aaron Dodson
61bbd7dbf6 chore: Remove underscores from private fields. (#8682)
* chore: Remove underscores from private fields.

* refactor: Use public APIs in tests where possible.
2024-12-02 11:33:05 -08:00
Aaron Dodson
9a7de53029 fix: Fix crash when resizing page while editing a field. (#8646)
* fix: Fix crash when resizing page while editing a field.

* refactor: Clean up positioning and exceptions.
2024-11-11 08:51:16 -08:00
Aaron Dodson
7bbbb959f0 feat!: Use CSS to specify field cursors. (#8648) 2024-11-11 07:54:17 -08:00
Aaron Dodson
e5c1a89cdf fix: Fix bug that caused fields in the flyout to use the main workspace's scale. (#8607)
* fix: Fix bug that caused fields in the flyout to use the main workspace's scale.

* chore: remove errant param in docs.
2024-10-02 08:18:47 -07:00
Christopher Allen
7ccdcc5cef refactor(events): introduce EventType enum in separate module (#8530)
* refactor(events): Use "export ... from" where applicable

* refactor(events): Introduce EventType enum

  Introduce an enum for the event .type values.  We can't actually
  use it as the type of the .type property on Abstract events,
  because we want to allow developers to add their own custom
  event types inheriting from this type, but at least this way we
  can be reasonably sure that all of our own event subclasses have
  distinct .type values—plus consistent use of enum syntax
  (EventType.TYPE_NAME) is probably good for readability overall.

  Put it in a separate module from the rest of events/utils.ts
  because it would be helpful if event utils could use

      event instanceof SomeEventType

  for type narrowing but but at the moment most events are in
  modules that depend on events/utils.ts for their .type
  constant, and although circular ESM dependencies should work
  in principle there are various restrictions and this
  particular circularity causes issues at the moment.

  A few of the event classes also depend on utils.ts for fire()
  or other functions, which will be harder to deal with, but at
  least this commit is win in terms of reducing the complexity
  of our dependencies, making most of the Abstract event subclass
  module dependent on type.ts, which has no imports, rather than
  on utils.ts which has multiple imports.
2024-08-20 08:36:33 +01:00
Christopher Allen
ce22f42868 chore: Organise imports (#8527)
* chore(deps): Add pretter-plugin-organize-imports

* chore: Remove insignificant blank lines in import sections

  Since prettier-plugin-organize-imports sorts imports within
  sections separated by blank lines, but preserves the section
  divisions, remove any blank lines that are not dividing imports
  into meaningful sections.

  Do not remove blank lines separating side-effect-only imports
  from main imports.

* chore: Remove unneded eslint-disable directives

* chore: Organise imports
2024-08-15 03:16:14 +01:00
Gabriel Fleury
e29d7abfdb fix!: Rename editing CSS class to blocklyEditing (#8287) (#8301)
* chore!: Rename editing CSS class to blocklyEditing (#8287)

* further changes
2024-07-22 15:38:40 -07:00
Maribeth Moffatt
7c6fbec23c Merge branch 'osd' into merge-osd 2024-05-23 10:59:53 -07:00
John Nesky
9b2ab79e73 fix: Only hide WidgetDiv if it is associated with the affected workspace. (#8150)
* Associate a workspace with WidgetDiv.

* Minor fixes after merging.

* Hide widget if owner is in an unknown workspace.
2024-05-20 12:48:05 -07:00
John Nesky
171befa746 fix!: Only fire intermediate events when editing input with invalid text. (#8054)
* fix: Fire intermediate events only when editing text input.

* Prefix unused arg with underscore.

* Fix tests.
2024-05-02 18:57:57 -07:00
Ebrahim Haji
e715269f0b fix: prevent block change event firing if editing is cancelled by using keypress (#7794)
* fix: prevent block change event firing if editing is cancelled

* refactor: formatted the code to specifications for commit 251c796d

ran npm run format
2024-01-19 08:13:32 -08:00
Beka Westberg
7d2c307fed fix: widget positioning (#7507)
* chore: delete dead code

* chore: moves location updating into the block

* chore: change dragging to use update component locations

* fix: field widgets not being moved when blocks are editted

* chore: remove unnecessary resizeEditor_ calls

* chore: format

* chore: fix build

* fix: tests

* chore: PR comments

* chore: format
2023-10-26 09:47:39 -07:00
Akanksha Kushwaha
9051889c43 minor: update 'field_input.ts' file (#7514)
* minor: update return type of widgetCreate_

Signed-off-by: Akanksha Kushwaha <cmakanksha@gmail.com>

* minor: remove 'as HTMLInputElement' cast

Signed-off-by: Akanksha Kushwaha <cmakanksha@gmail.com>

* minor: update return type and cast

Signed-off-by: Akanksha Kushwaha <cmakanksha@gmail.com>

---------

Signed-off-by: Akanksha Kushwaha <cmakanksha@gmail.com>
2023-09-22 13:50:16 -07:00
laurensvalk
3b234c7f87 fix: Call onFinishEditing_ for fields on mobile. (#7483)
On the desktop, widgetDispose_ will call onFinishEditing_ on close.

This was missing in the mobile counterpart, so any cleanups in onFinishEditing_ would not be called.

Also update the message string comment while we are touching this code.
2023-09-20 06:15:17 -07:00
Beka Westberg
25d15fd596 fix: zelos full block fields rendering badly (#7490)
* fix: text input fields

* fix: colour field

* chore: cleanup override keywords

* chore: revert playground changes

* fix: applyColour not being called

* chore: swap visibility for display

* chore: cleanup for PR comments

* fix: PR comments
2023-09-14 22:22:40 +00:00
Christopher Allen
b0a7c004a9 refactor(build): Delete Closure Library (#7415)
* fix(build): Restore erroneously-deleted filter function

  This was deleted in PR #7406 as it was mainly being used to
  filter core/ vs. test/mocha/ deps into separate deps files -
  but it turns out also to be used for filtering error
  messages too.  Oops.

* refactor(tests): Migrate advanced compilation test to ES Modules

* refactor(build): Migrate main.js to TypeScript

  This turns out to be pretty straight forward, even if it would
  cause crashing if one actually tried to import this module
  instead of just feeding it to Closure Compiler.

* chore(build): Remove goog.declareModuleId calls

  Replace goog.declareModuleId calls with a comment recording the
  former module ID for posterity (or at least until we decide
  how to reformat the renamings file.

* chore(tests): Delete closure/goog/*

  For the moment we still need something to serve as base.js for
  the benefit of closure-make-deps, so we keep a vestigial
  base.js around, containing only the @provideGoog declaration.

* refactor(build): Remove vestigial base.js

  By changing slightly the command line arguments to
  closure-make-deps and closure-calculate-chunks the need to have
  any base.js is eliminated.

* chore: Typo fix for PR #7415
2023-08-31 00:24:47 +01:00
Maribeth Bottorff
a0b565724b feat: make field initView and initModel more accessible (#7345)
* chore: update loop style to remove any type

* feat: make initView protected and initModel public

* feat: make image element in image field protected
2023-08-08 10:18:51 -07:00
dependabot[bot]
2546b01d70 chore(deps): Bump prettier from 2.8.8 to 3.0.0 (#7322)
* chore(deps): Bump prettier from 2.8.8 to 3.0.0

Bumps [prettier](https://github.com/prettier/prettier) from 2.8.8 to 3.0.0.
- [Release notes](https://github.com/prettier/prettier/releases)
- [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md)
- [Commits](https://github.com/prettier/prettier/compare/2.8.8...3.0.0)

---
updated-dependencies:
- dependency-name: prettier
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* chore: Reformat using Prettier v3.0 defaults

The main change is to add trailing commas to the last line of
block-formatted function calls.

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Christopher Allen <cpcallen+git@google.com>
2023-07-25 14:56:10 +00:00
John Nesky
b8ad7d307f feat: use new intermediate block change event for field edits, normal block change event for closing editor. #7105 (#7151)
* Copy core/events/events_block_change.ts to core/events/events_block_field_intermediate_change.ts

* New intermediate event type for field edits.

* Addressing PR feedback.

* Ran npm run format.

* Fixed procedure mutator responding to param edits.

* Intermediate events now inherit from BlockBase.

* Addressing feedback on PR.

* chore: format
2023-06-16 09:27:56 -07:00
Maribeth Bottorff
88ff901a72 chore: use prettier instead of clang-format (#7014)
* chore: add and configure prettier

* chore: remove clang-format

* chore: remove clang-format config

* chore: lint additional ts files

* chore: fix lint errors in blocks

* chore: add prettier-ignore where needed

* chore: ignore js blocks when formatting

* chore: fix playground html syntax

* chore: fix yaml spacing from merge

* chore: convert text blocks to use arrow functions

* chore: format everything with prettier

* chore: fix lint unused imports in blocks
2023-05-10 16:01:39 -07:00
Maribeth Bottorff
bf8be1a4f9 fix: update applyColour documentation (#6998) 2023-04-24 10:23:16 -07:00
Maribeth Bottorff
467b6a2e79 fix: rtl field alignment (#6991) 2023-04-20 13:53:18 -07:00
Maribeth Bottorff
2bbb3aa1fc fix: do not hide all chaff when resizing (#6916) 2023-04-17 10:06:44 -07:00
Aaron Dodson
d004bd256d fix: Make Escape cancel changes in text fields. (#6923) 2023-03-24 14:56:25 -07:00
Christopher Allen
faa95d022d fix(fields): Make SKIP_SETUP a Symbol; remove Sentinel class (#6919)
We introduced the SKIP_SETUP sentinel value when converting
Field and its subclasses to ES6 class syntax, because super
must be called before any other code in a subclass
constructor, breaking the previous mechanism where subclasses
would set some properties before calling their superclass
constructor.

SKIP_SETUP was a singleton value of class Sentinel.

Recently, in PR #6639 @btw17 introduced the isSentinel type
predicate to improve the typing of Field.  Unfortunately, there
were some aspects of this change that were not very elegant:

- isSentinel was declared as a static method on Field (rather
  than on Sentinel itself).
- It only checks against the specific value SKIP_SETUP,
  rather than checking if the argument is instanceof Sentinel
  (though perhaps this is for efficiency?)

Additionally - as a result of the migration from ES6 to TS, and
predating PR #6639 - The signature for the Field constructor's
first argument was typed T|Sentinel, with subclass constructors
generally being <some type(s)>|Sentinel.

This creates a small problem when attempting to port Fields from
core to plugins, because Sentinel is not reexported by
core/utils.ts (and therefore not from core/blockly.ts either).

The latter problem could be solved simply by reexporting Sentinel,
or by having plugin constructors not accept SKIP_SETUP (though
this potentially makes them more difficult to subclass), but
neither is particularly desirable.

Instead, this PR proposes that we:

- Make Field.SKIP_SETUP a (unique) Symbol.
- Change the value argument to the Field constructor to accept
  T|typeof Field.SKIP_SETUP - where typeof Field.SKIP_SETUP is
  (like a literal type) a type that accepts just the single
  value SKIP_SETUP.
- Remove the Sentinel class and core/utils/sentinel.ts.

Not treating this as a breaking change:

- Removes Field.isSentinel - though this addition has not yet
  been published, so it can only break our own as-yet-unreleased
  code in samples.

- Changes the type of Field.SKIP_SETUP and the first argument
  of the Field constructor from Sentinel to typeof SKIP_SETUP
  (a unique Symbol) - but given that Sentinel has never been
  exported this should not break any actual external code.
2023-03-23 20:30:48 +00:00
Neil Fraser
42fde0f81b chore: Reduce delta on ports to blockly-samples (#6886)
* Reduce usage of obsolete .keyCode property.
* Rename private properties/methods which violate eslint rules.
* Use arrays of bound events rather than individual properties.
* Improve typing info.
* Also fix O(n^2) recursive performance issue in theme's getComponentStyle function.
* And replace String(...) with '${...}' (smaller, faster).
* .toString() is considered harmful.
2023-03-15 13:28:57 -07:00
Blake Thomas Williams
9e5bfc243e fix: export Field-related types from Blockly (#6877)
* chore: re-exported Field config types from Blockly

* mark `@internal` types, export field error, and add validator comments
2023-03-03 14:20:20 -08:00
Rachel Fenichel
1d1a927628 chore: remove alias comments (#6816)
* chore: remove alias comments

* chore: format

* chore: remove extra newlines

* chore: fix bad replaces
2023-02-06 10:08:55 -08:00
Blake Thomas Williams
0fb64a6772 fix: replace 'AnyDuringMigration' for core/field.ts value functions (#6639)
* chore: replace `AnyDuringMigration` for field value functions

* chore: removed unnecessary `KeyboardEvent` comments and `AnyDuringMigration` casts

* chore: cleaned up `doValueUpdate_` and `doClassValidation_` in `Field` subclasses

* fix: updated `FieldValidator` to allow returning `undefined` and restructured `setValue`

* fix: implemented initial `core/field_checkbox.ts` feedback

* fix: updated `Field` to accept `U` and `undefined` and reverted subclass constructor handling of the input value

* fix: reverted `getVars` to returning `string[]` and added related comment

* chore: removed unnecessary comment

* fix: updated `processValidation_` to no longer allow returning `undefined`

* fix: removed `Un` type alias for `undefined`

* chore: removed unnecessary string cast in `core/field_colour.ts`

* fix: updated `doClassValidation_` not to expect `null` since it will never come up in `setValue`

* fix: updated `doClassValidation_` to only allow `undefined` when the new value exists

* Updated `FieldValidator` type to expect `newValue` to exist

* cleanup: updated `picker` from type `Element` to type `HTMLElement`

* fix: updated `doValueInvalid_` type info in `core/field_input.ts` to handle `string` and `undefined`

* fix: reverted `getValue` in `core/field_checkbox.ts` to previous logic

* fix: updated the `Field` constructor to allow `value` to be optional

* chore: consolidated `Validation` with `FieldValidator` and `doClassValidation_`

* fix: reverted generic param `U` while handling diverging user input is being discussed

* fix: updated `doClassValidation_` return comment to work for TSDoc

* fix: misc keyboard event function tweaks
2023-01-10 14:13:49 -08:00
Beka Westberg
658e14ff75 fix: not being able to set field values to empty (#6702) 2022-12-14 17:08:15 -08:00
Maribeth Bottorff
be4b8323c5 feat: add option to disable modal inputs on mobile (#6625) 2022-11-22 11:52:46 -08:00
Blake Thomas Williams
79f620647f chore: add validator and field value types (#6603)
* chore: add validator and field value types

* chore/clean up unused default and unnecessary field type setting

* chore: removed IRegisterableField and updated various Field instances

* fix: remove unused field image validator function

* chore: added pass-through constructor to field_textinput
2022-11-11 08:54:57 -08:00