[Infusion-users] Tweaking inlinedit blurHandler

Antranig Basman antranig.basman at colorado.edu
Wed Jan 27 05:26:15 UTC 2010


On 26/01/2010 14:01, Matt Zumwalt wrote:
> I'm trying to attach a date picker to one of my inline edit fields.  It's almost working, but I've run into the problem that selecting the datepicker means you've clicked off of the input, which causes the whole thing to cease being editable (and causes the date picker to disappear).
>
> The date picker is within the edit-container, but it's outside of the input itself.  Is there a way to change the inline edit initializer so that the input will remain editable as long as I click within the edit container?  I have a vague sense that the blurHandler option or bindBlurHandler method might be my friend here, but the documentation is a bit sparse on that front.
>

Hi there Matt - you are quite correct, that the blurHandler options is 
indeed the key to getting the behaviour you desire :)
Sorry that it is not more clearly documented, but actually it is a 
little obscure to guess what exactly we might say about it. The best 
thing I can do is point you at a usage of this option in the context of 
our drop-down selection inlineEdit integration which would otherwise 
suffer from exactly the problem you name - that a loss of focus on the 
target input itself causes the control to fold up again.

     fluid.inlineEdit.dropdown.blurHandlerBinder = function (that) {
         fluid.deadMansBlur(that.editField,
                            $("div.selectbox-wrapper li", 
that.editContainer),
                            function () {
                                that.cancel();
                            });
     };

(from InlineEditIntegrations.js)

The crucial configuration you need to apply here is the 2nd argument to 
the framework utility fluid.deadMansBlur - this registers a set of nodes 
which are to be recognised as controls for which the "close-on-blur" 
behaviour should be ignored, if the blur is caused by a focus on them. I 
hope that is reasonably clear - in any case, you should try to concoct a 
selector which in this case hits all of the DOM nodes that it is 
possible for focus to reach that lie within the datepicker control you 
are using. This probably would need to be done with a bit of experiment 
and/or a judicious investigation with the Firebug DOM inspector or 
similar... don't hesitate to come back quickly if you need any further 
clarification of help. Given this situation takes a bit of explaining it 
is best to adopt an iterative approach :)

If you do get this work, please don't hesitate to try to contribute any 
code you might have back to us, since an inline-editable datepicker is 
something that has been on our roadmap for a while but languished for 
lack of resources.

Cheers,
A.




More information about the Infusion-users mailing list