@primer/react 38.28.0-rc.1c2334f8e → 38.28.0-rc.664246046

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -8,6 +8,8 @@
8
8
 
9
9
  ### Patch Changes
10
10
 
11
+ - [#7918](https://github.com/primer/react/pull/7918) [`95986ce`](https://github.com/primer/react/commit/95986ce22eaca6f4cb2122a00d51ec93d72f2dfe) Thanks [@jonrohan](https://github.com/jonrohan)! - Autocomplete: Keep the typed text instead of restoring the full inline suggestion when the input loses focus, matching the behavior of pressing Escape
12
+
11
13
  - [#7910](https://github.com/primer/react/pull/7910) [`0c38cfa`](https://github.com/primer/react/commit/0c38cfaeabab347e48d4e34c200739e32efa73a2) Thanks [@janmaarten-a11y](https://github.com/janmaarten-a11y)! - Timeline: Add `primer_react_timeline_list_semantics` feature flag to opt into list semantics
12
14
 
13
15
  When the `primer_react_timeline_list_semantics` feature flag is enabled, `Timeline` renders as `<ol role="list">` and `Timeline.Item` / `Timeline.Break` render as `<li>` so screen reader users get list navigation (total item count, position in sequence). The default behavior is unchanged — `Timeline` and its subcomponents still render as `<div>` until the flag is opted into.
@@ -1 +1 @@
1
- {"version":3,"file":"AutocompleteInput.d.ts","sourceRoot":"","sources":["../../src/Autocomplete/AutocompleteInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqD,MAAM,OAAO,CAAA;AACzE,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,OAAO,SAAS,MAAM,cAAc,CAAA;AAEpC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAGlD,KAAK,8BAA8B,GAAG;IAEpC,EAAE,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAA;IAEtD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAID,QAAA,MAAM,iBAAiB,EAyJlB,8BAA8B,CAAC,OAAO,SAAS,EAAE,8BAA8B,CAAC,CAAA;AAIrF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAC7E,eAAe,iBAAiB,CAAA"}
1
+ {"version":3,"file":"AutocompleteInput.d.ts","sourceRoot":"","sources":["../../src/Autocomplete/AutocompleteInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqD,MAAM,OAAO,CAAA;AACzE,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,OAAO,SAAS,MAAM,cAAc,CAAA;AAEpC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAGlD,KAAK,8BAA8B,GAAG;IAEpC,EAAE,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAA;IAEtD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAID,QAAA,MAAM,iBAAiB,EA2KlB,8BAA8B,CAAC,OAAO,SAAS,EAAE,8BAA8B,CAAC,CAAA;AAIrF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAC7E,eAAe,iBAAiB,CAAA"}
@@ -56,9 +56,17 @@ const AutocompleteInput = /*#__PURE__*/React.forwardRef(({
56
56
  safeSetTimeout(() => {
57
57
  if (document.activeElement !== inputRef.current) {
58
58
  setShowMenu(false);
59
+
60
+ // Reset the input's value to the text the user actually typed rather than leaving the
61
+ // inline autocomplete suggestion in place. This keeps the blur behavior consistent with
62
+ // pressing Escape, so deleting characters off a selection and then clicking away does not
63
+ // silently restore the full suggestion. See https://github.com/primer/react/issues/4275
64
+ if (inputRef.current && autocompleteSuggestion && inputRef.current.value !== inputValue) {
65
+ inputRef.current.value = inputValue;
66
+ }
59
67
  }
60
68
  }, 0);
61
- }, [onBlur, setShowMenu, inputRef, safeSetTimeout]);
69
+ }, [onBlur, setShowMenu, inputRef, safeSetTimeout, autocompleteSuggestion, inputValue]);
62
70
  const handleInputChange = event => {
63
71
  onChange && onChange(event);
64
72
  setInputValue(event.currentTarget.value);
@@ -110,7 +118,11 @@ const AutocompleteInput = /*#__PURE__*/React.forwardRef(({
110
118
  // TODO: fix bug where this function prevents `onChange` from being triggered if the highlighted item text
111
119
  // is the same as what I'm typing
112
120
  // e.g.: typing 'tw' highlights 'two', but when I 'two', the text input change does not get triggered
113
- if (highlightRemainingText && autocompleteSuggestion && (inputValue || isMenuDirectlyActivated)) {
121
+ // Only apply the inline autocomplete suggestion while the input is focused. Without this guard,
122
+ // the suggestion can be re-applied to the DOM after the input is blurred, which would restore
123
+ // the full suggestion the user was editing away from. See https://github.com/primer/react/issues/4275
124
+ const isInputFocused = document.activeElement === inputRef.current;
125
+ if (isInputFocused && highlightRemainingText && autocompleteSuggestion && (inputValue || isMenuDirectlyActivated)) {
114
126
  inputRef.current.value = autocompleteSuggestion;
115
127
  if (autocompleteSuggestion.toLowerCase().indexOf(inputValue.toLowerCase()) === 0) {
116
128
  inputRef.current.setSelectionRange(inputValue.length, autocompleteSuggestion.length);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@primer/react",
3
3
  "type": "module",
4
- "version": "38.28.0-rc.1c2334f8e",
4
+ "version": "38.28.0-rc.664246046",
5
5
  "description": "An implementation of GitHub's Primer Design System using React",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",