fix blur

inspector/src/components/actionTabs/tabs/propertyGrids/animations/curveEditor.scss

@@ -544,6 +544,9 @@ body {
                     padding-left: 10px;
                     padding-right: 10px;
                     width: 782px;
+                    &:focus {
+                        outline: none;
+                    }
 
                     &::-webkit-scrollbar {
                         height: 0.4em;
@@ -599,6 +602,9 @@ body {
                         align-items: center;
                         padding-left: 2px;
                         padding-right: 2px;
+                        &:focus {
+                            outline: none;
+                        }
                         .handle {
                             display: flex;
                             flex-direction: row;

inspector/src/components/actionTabs/tabs/propertyGrids/animations/timeline.tsx

@@ -104,7 +104,9 @@ export class Timeline extends React.Component<
                     scrollWidth: this.calculateScrollWidth(0, newEnd),
                 });
                 if (this._scrollbarHandle.current && this._scrollContainer.current) {
-                    this._scrollbarHandle.current.style.left = `${this._scrollContainer.current.getBoundingClientRect().left + this._marginScrollbar}px`;
+                    this._scrollbarHandle.current.style.left = `${
+                        this._scrollContainer.current.getBoundingClientRect().left + this._marginScrollbar
+                    }px`;
                 }
             }
         );
@@ -144,6 +146,7 @@ export class Timeline extends React.Component<
     setCurrentFrame = (event: React.MouseEvent<HTMLDivElement>) => {
         event.preventDefault();
         if (this._scrollable.current) {
+            this._scrollable.current.focus();
             const containerWidth = this._scrollable.current?.clientWidth;
             const unit = Math.round(containerWidth / this.state.selectionLength.length);
             const frame = Math.round((event.clientX - 233) / unit) + this.state.start;
@@ -208,6 +211,8 @@ export class Timeline extends React.Component<
 
     scrollDragStart = (e: React.MouseEvent<HTMLDivElement, MouseEvent>): void => {
         e.preventDefault();
+        this._scrollContainer.current && this._scrollContainer.current.focus();
+
         if ((e.target as HTMLDivElement).className === "scrollbar") {
             if (this._scrollbarHandle.current) {
                 this._scrolling = true;
@@ -319,7 +324,10 @@ export class Timeline extends React.Component<
             }
 
             if (!(framesTo >= this.state.end - 20)) {
-                let toleft = framesTo * unit + this._scrollContainer.current.getBoundingClientRect().left + this._marginScrollbar * 2;
+                let toleft =
+                    framesTo * unit +
+                    this._scrollContainer.current.getBoundingClientRect().left +
+                    this._marginScrollbar * 2;
                 if (this._scrollbarHandle.current) {
                     this._scrollbarHandle.current.style.left = toleft + "px";
                 }
@@ -369,7 +377,11 @@ export class Timeline extends React.Component<
                         scrollable={this._scrollable}
                     />
                     <div className="timeline-wrapper">
-                        <div ref={this._scrollable} className="display-line" onClick={this.setCurrentFrame}>
+                        <div
+                            ref={this._scrollable}
+                            className="display-line"
+                            onClick={this.setCurrentFrame}
+                            tabIndex={50}>
                             <svg
                                 style={{
                                     width: "100%",
@@ -379,23 +391,39 @@ export class Timeline extends React.Component<
                                 onMouseMove={this.drag}
                                 onMouseDown={this.dragStart}
                                 onMouseUp={this.dragEnd}
-                                onMouseLeave={this.dragEnd}
-                            >
+                                onMouseLeave={this.dragEnd}>
                                 {this.state.selectionLength.map((frame, i) => {
                                     return (
                                         <svg key={`tl_${frame}`}>
                                             {
                                                 <>
-                                                    {frame % Math.round(this.state.selectionLength.length / 20) === 0 ? (
+                                                    {frame % Math.round(this.state.selectionLength.length / 20) ===
+                                                    0 ? (
                                                         <>
-                                                            <text x={(i * 100) / this.state.selectionLength.length + "%"} y="18" style={{ fontSize: 10, fill: "#555555" }}>
+                                                            <text
+                                                                x={(i * 100) / this.state.selectionLength.length + "%"}
+                                                                y="18"
+                                                                style={{ fontSize: 10, fill: "#555555" }}>
                                                                 {frame}
                                                             </text>
-                                                            <line x1={(i * 100) / this.state.selectionLength.length + "%"} y1="22" x2={(i * 100) / this.state.selectionLength.length + "%"} y2="40" style={{ stroke: "#555555", strokeWidth: 0.5 }} />
+                                                            <line
+                                                                x1={(i * 100) / this.state.selectionLength.length + "%"}
+                                                                y1="22"
+                                                                x2={(i * 100) / this.state.selectionLength.length + "%"}
+                                                                y2="40"
+                                                                style={{ stroke: "#555555", strokeWidth: 0.5 }}
+                                                            />
                                                         </>
                                                     ) : null}
                                                     {this.getCurrentFrame(frame) ? (
-                                                        <svg x={this._scrollable.current ? this._scrollable.current.clientWidth / this.state.selectionLength.length / 2 : 1}>
+                                                        <svg
+                                                            x={
+                                                                this._scrollable.current
+                                                                    ? this._scrollable.current.clientWidth /
+                                                                      this.state.selectionLength.length /
+                                                                      2
+                                                                    : 1
+                                                            }>
                                                             <line
                                                                 x1={(i * 100) / this.state.selectionLength.length + "%"}
                                                                 y1="0"
@@ -403,7 +431,10 @@ export class Timeline extends React.Component<
                                                                 y2="40"
                                                                 style={{
                                                                     stroke: "rgba(18, 80, 107, 0.26)",
-                                                                    strokeWidth: this._scrollable.current ? this._scrollable.current.clientWidth / this.state.selectionLength.length : 1,
+                                                                    strokeWidth: this._scrollable.current
+                                                                        ? this._scrollable.current.clientWidth /
+                                                                          this.state.selectionLength.length
+                                                                        : 1,
                                                                 }}
                                                             />
                                                         </svg>
@@ -411,7 +442,14 @@ export class Timeline extends React.Component<
 
                                                     {this.getKeyframe(frame) ? (
                                                         <svg key={`kf_${i}`} tabIndex={i + 40}>
-                                                            <line id={`kf_${i.toString()}`} x1={(i * 100) / this.state.selectionLength.length + "%"} y1="0" x2={(i * 100) / this.state.selectionLength.length + "%"} y2="40" style={{ stroke: "#ffc017", strokeWidth: 1 }} />
+                                                            <line
+                                                                id={`kf_${i.toString()}`}
+                                                                x1={(i * 100) / this.state.selectionLength.length + "%"}
+                                                                y1="0"
+                                                                x2={(i * 100) / this.state.selectionLength.length + "%"}
+                                                                y2="40"
+                                                                style={{ stroke: "#ffc017", strokeWidth: 1 }}
+                                                            />
                                                         </svg>
                                                     ) : null}
                                                 </>
@@ -422,9 +460,18 @@ export class Timeline extends React.Component<
                             </svg>
                         </div>
 
-                        <div className="timeline-scroll-handle" onMouseMove={this.scrollDrag} onMouseDown={this.scrollDragStart} onMouseUp={this.scrollDragEnd} onMouseLeave={this.scrollDragEnd} onDragStart={this.dragDomFalse}>
-                            <div className="scroll-handle" ref={this._scrollContainer}>
-                                <div className="handle" ref={this._scrollbarHandle} style={{ width: this.state.scrollWidth }}>
+                        <div
+                            className="timeline-scroll-handle"
+                            onMouseMove={this.scrollDrag}
+                            onMouseDown={this.scrollDragStart}
+                            onMouseUp={this.scrollDragEnd}
+                            onMouseLeave={this.scrollDragEnd}
+                            onDragStart={this.dragDomFalse}>
+                            <div className="scroll-handle" ref={this._scrollContainer} tabIndex={60}>
+                                <div
+                                    className="handle"
+                                    ref={this._scrollbarHandle}
+                                    style={{ width: this.state.scrollWidth }}>
                                     <div className="left-grabber">
                                         <div className="left-draggable">
                                             <div className="grabber"></div>
@@ -448,7 +495,12 @@ export class Timeline extends React.Component<
                         </div>
 
                         <div className="input-frame">
-                            <input ref={this._inputAnimationLimit} type="number" value={this.state.limitValue} onChange={(e) => this.handleLimitChange(e)} onBlur={(e) => this.onInputBlur(e)}></input>
+                            <input
+                                ref={this._inputAnimationLimit}
+                                type="number"
+                                value={this.state.limitValue}
+                                onChange={(e) => this.handleLimitChange(e)}
+                                onBlur={(e) => this.onInputBlur(e)}></input>
                         </div>
                     </div>
                 </div>